CODEWITHSUNDEEP
htmlcsstailwind-css
Milton C
Milton C

Reputation: 123

Text and icon on the same line with Tailwind CSS?

I am trying to get the text on the left side and the icon on the right side, but right now the icon is above the text, see the first image. I want the icon to be in the top right corner to the right of “Project name”, and the text to be like the second image.

<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<div class="flex card bg-neutral h-48 px-3 hover:bg-primary">
  <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
  </svg>
  <h2 class="text-2xl font-bold text-white py-3">Project name</h2>
  <p class="text-left py-4 font-bold group-hover:bg-primary">Explaination of the project</p>
  <p class="text-left pb-4 font-bold">Tag, tag, tag</p>
</div>

Result of code

Desired result, with the icon on the right

Upvotes: 9

Views: 37559

Answers (5)

Gaurav Gandal
Gaurav Gandal

Reputation: 1

<!DOCTYPE html>

<head>
    <title>Example 2</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/js/all.min.js"></script>
</head>

<body class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
    <h1 class="text-green-500 text-4xl font-bold mb-4">Hello</h1>
    <h3 class="text-gray-700 text-2xl mb-6">Using Inline-Block and Align-Middle</h3>

    <div>
        <i class="fab fa-github text-gray-800 text-3xl inline-block align-middle"></i>
        <span class="text-lg text-gray-700 inline-block align-middle ml-2">Contribute on GitHub</span>
    </div>
</body>

</html>

Upvotes: 0

Jurass
Jurass

Reputation: 596

Solutions provided here are full of boilerplate code. Here is simple solution using inline-flex and span:

<p>
Today I spent most of the day researching ways to ...
<span class="inline-flex items-baseline">
    <img src="path/to/image.jpg" alt="" class="self-center w-5 h-5 rounded-full mx-1" />
    <span>Kramer</span>
</span>
keeps telling me there is no way to make it work, that ...
</p>

Upvotes: 14

Ahmad Alfy
Ahmad Alfy

Reputation: 13371

Wrap both the title and the icon in a div with the class flex. This way they will be placed on the same line.

You can also add justify-between to move the icon to the right corner.

A great suggestion from Cornel Raiu in the comments about adding items-center to the mix, to vertically align both the title and the icon.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<div class="card bg-neutral h-48 px-3 hover:bg-primary">
  <div class="flex justify-between">
    <h2 class="text-2xl font-bold text-white py-3">Project name</h2>
    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
    </svg>
  </div>
  <p class="text-left py-4 font-bold group-hover:bg-primary">Explaination of the project</p>
  <p class="text-left pb-4 font-bold">Tag, tag, tag</p>
</div>

Upvotes: 18

user18265126
user18265126

Reputation:

You can add items-center along with justify-between class that will keep the icon completely verticle align to the heading.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="card bg-neutral h-48 px-3 hover:bg-primary">
  <div class="flex justify-between items-center">
    <h2 class="text-2xl font-bold text-dark py-3">Project name</h2>
    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
    </svg>
  </div>
  <p class="text-left py-4 font-bold group-hover:bg-primary">Explaination of the project</p>
  <p class="text-left pb-4 font-bold">Tag, tag, tag</p>
</div>

Upvotes: 1

xDre4M
xDre4M

Reputation: 13

Hope this helps .

 <div class="flex items-center">
          <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="11" />
            <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
          </svg>
          <p class="ml-4">
            Icons
            <code class="text-sm font-bold text-gray-900">Next to Text...!</code> file
          </p>
        </div>

Upvotes: 0

Related Questions