DESIGINING A CARD USING TAILWIND

 <!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind Card</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="border-2  m-4 justify-center w-1/3">
      <div
        class="h-14 bg-gradient-to-t from-sky-500 to-indigo-500 text-white flex justify-center p-4 font-bold"
      >
        News you can Trust.
      </div>
      <div class="text-center">
        <h2 class="text-lg font-semibold my-2">Stay up to date with the Latest!</h2>
        <p>
          Subscribe to our newsletter for latest news straight into your inbox
        </p>
        <form>
          <input placeholder="you@example.com" class="bg-slate-200 my-4 text-center placeholder:text-sm"/><br/>
          <button
            class="bg-blue-400 text-white border-2 border-white rounded-full w-48 my-2"
          >
            subscribe now
          </button>
        </form>

        <p class="my-2">we value your privacy</p>
      </div>
    </div>
  </body>
</html>

Comments

Popular posts from this blog

Introduction

Break points in Tailwind

Color and Spacing