CODEWITHSUNDEEP
tailwind-css
krankos
krankos

Reputation: 11

How can I align a button with the end of some text using tailwindcss?

This is the effect I'm trying to reproduce. The button is aligned on the right on the same level as the text. This is the result I want Goal This is where I am image.

I tried using the grid but that ends up aligning the button with the div containing the text. The text has no padding.

Here's my code

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div class="container grid grid-cols-2 gap-32 h-screen">
    <div class="border-solid border-red-600 border-2">
      <div class="">
        <h1 class="font-['Poppins'] font-bold text-5xl ml-0 leading-snug border-2 border-solid pr-0 inline-block">
          Appliying for an internship has never been easier!
        </h1>
      </div>
      <div class="justify-end flex">
        <a class="btnn py-2 px-4 rounded-md inline-block" href="/blog">
              Get Started!</a
            >
          </div>
        </div>
        <div
          class="border-2 border-solid border-red-500 grid grid-cols-2 gap-4"
        >
  
      </div>
</body>
</html>

Upvotes: 1

Views: 2872

Answers (1)

DSDmark
DSDmark

Reputation: 1261

Hi @krankos

If you want the result as it's show in your Goal image Which you provided above. Then you could try that code which is in snippet. And also there are a lot of examples relate to that How to do that kind of things. Like at one:- Build websites faster with Tailwind CSS

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  
<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
    <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Applying for an internship has never been easier!</h5>
    </a>
        <div class="grid justify-end">
    <a href="#" class="flex mr-auto  px-3 py-2 text-sm font-medium text-center text-white bg-green-500 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
        Get started!
    </a>
</div>
</div>

</body>
</html>

Upvotes: 1

Related Questions