Sign up tailwind css

giandodev

GiandoDev

Posted on May 13, 2020

Sign up tailwind css

Sign up with tailwind css:

The Code, remember you have to import tailwndcss via CDN in your html file before using tailwind 🙂:

<div class="bg-white">
  <div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
    <h2 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
      Want  more News ?
      <br class="hidden sm:inline" />
      <span class="text-indigo-600">Sign up for My newsletter.</span>
    </h2>
    <form class="mt-8 sm:flex">
      <input aria-label="Email address" type="email" required class="appearance-none w-full px-5 py-3 border border-gray-300 text-base leading-6 rounded-md text-gray-900 bg-white placeholder-gray-500 focus:outline-none focus:shadow-outline focus:border-blue-300 transition duration-150 ease-in-out sm:max-w-xs" placeholder="Enter your email" />
      <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
        <button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
          Send me
        </button>
      </div>
    </form>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
giandodev
GiandoDev

Posted on May 13, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Sign up tailwind css
tailwindcss Sign up tailwind css

May 13, 2020