Tailwind CSS Inline Block Element (inline Class)
It is used to display an element as an inline element. This class is the default property of anchor tags. This is used to place the div inline i.e. in a horizontal manner. The inline display property ignores the height and the width set by the user.
Syntax:
<element display="inline">...</element>
Example 3:
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
w3wiki
</h1>
<b>Tailwind CSS inline Class</b>
<div class="bg-green-200 p-4 mx-16 space-y-4">
<span class="inline bg-green-500 rounded-lg">1</span>
<span class="inline bg-green-500 rounded-lg">2</span>
<span class="inline bg-green-500 rounded-lg">3</span>
</div>
</body>
</html>
Output:
Tailwind CSS Display
This class accepts more than one value in Tailwind CSS. All the properties are covered in a class form. It is the alternative to the CSS display property. This class is used to define how the components (div, hyperlink, heading, etc) are going to be placed on the web page. As the name suggests, this property is used to define the display of the different parts of a web page.