Published on

How To Build A Ask CTA With Tailwind CSS In 6 Easy Steps?

Tags
CardsWidget
Ask CTA

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that helps you to create custom designs quickly. It provides a set of pre-defined CSS classes that you can use to style your HTML elements. With Tailwind CSS, you can create responsive web designs without writing any custom CSS.

The description of Ask CTA ui component

Ask CTA (Call to Action) is a user interface component that encourages users to take a specific action. It is usually used to prompt users to sign up for a service, subscribe to a newsletter, or download an app. An Ask CTA typically consists of a headline, a subheadline, and a button.

Why use Tailwind CSS to create a Ask CTA ui component?

Tailwind CSS provides a set of pre-defined CSS classes that you can use to style your HTML elements. This makes it easy to create custom designs quickly without writing any custom CSS. With Tailwind CSS, you can create responsive web designs that look great on all devices.

The preview of Ask CTA ui component

To create an Ask CTA with Tailwind CSS, you can use the following HTML structure:

Free download of the Ask CTA's source code

The source code of Ask CTA ui component

To create an Ask CTA with Tailwind CSS, you can use the following HTML structure:

<!-- 
    =======================================================================
    Name    :   CTA
    Author  :   Tony RICHER
    Twitter :   @RICHERTony1

    Copyright © 2021
    =======================================================================
 -->

<div class="container mx-auto">
  <div
    class="space-between relative my-12 flex flex-col items-center justify-between overflow-hidden rounded-lg bg-red-300 p-8 text-white md:flex-row"
  >
    <!-- LEFT PART -->
    <div class="z-10 flex max-w-sm flex-col lg:ml-14 lg:max-w-xl xl:ml-28">
      <h4 class="text-center text-4xl font-bold text-white md:pb-2 md:text-left">
        You need more informations?
      </h4>
      <p class="text-center text-white opacity-70 md:pb-6 md:text-left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      </p>
      <p class="hidden text-xs text-red-200 md:block">consectetur adipiscing elit</p>
    </div>

    <!-- RIGHT PART -->
    <div class="z-10 justify-center pt-8 md:pt-0 lg:ml-auto">
      <!-- Contribuer -->
      <a
        href="#"
        target="_blank"
        download
        class="font-display flex items-center rounded-full bg-white px-8 py-4 text-center text-sm uppercase text-red-300 transition duration-200 hover:bg-red-600 hover:text-white"
      >
        <svg
          class="mr-3 h-5 w-5"
          width="20"
          height="24"
          viewBox="0 0 20 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9.75081 17.2493C9.55189 17.2493 9.36116 17.1702 9.22052 17.0295L6.22027 14.0293C6.08364 13.8878 6.00803 13.6984 6.00974 13.5017C6.01145 13.305 6.09034 13.1169 6.22941 12.9778C6.36847 12.8388 6.55661 12.7599 6.75327 12.7582C6.94993 12.7565 7.1394 12.8321 7.28086 12.9687L9.75081 15.4387L12.2208 12.9687C12.3622 12.8321 12.5517 12.7565 12.7484 12.7582C12.945 12.7599 13.1332 12.8388 13.2722 12.9778C13.4113 13.1169 13.4902 13.305 13.4919 13.5017C13.4936 13.6984 13.418 13.8878 13.2814 14.0293L10.2811 17.0295C10.1405 17.1702 9.94972 17.2493 9.75081 17.2493Z"
            fill="currentColor"
          />
          <path
            d="M9.75081 17.2493C9.55189 17.2493 9.36116 17.1702 9.22052 17.0295C9.07986 16.8889 9.00075 16.6982 9.00075 16.4992V8.99862C9.00075 8.79969 9.07977 8.60891 9.22044 8.46825C9.3611 8.32758 9.55187 8.24856 9.7508 8.24856C9.94973 8.24856 10.1405 8.32758 10.2812 8.46825C10.4219 8.60891 10.5009 8.79969 10.5009 8.99862V16.4992C10.5009 16.6982 10.4218 16.8889 10.2811 17.0295C10.1405 17.1702 9.94972 17.2493 9.75081 17.2493Z"
            fill="currentColor"
          />
          <path
            d="M14.2512 20.2496H5.25044C5.05151 20.2496 4.86073 20.1705 4.72006 20.0299C4.5794 19.8892 4.50038 19.6984 4.50038 19.4995C4.50038 19.3006 4.5794 19.1098 4.72006 18.9691C4.86073 18.8285 5.05151 18.7494 5.25044 18.7494H14.2512C14.4501 18.7494 14.6409 18.8285 14.7816 18.9691C14.9222 19.1098 15.0012 19.3006 15.0012 19.4995C15.0012 19.6984 14.9222 19.8892 14.7816 20.0299C14.6409 20.1705 14.4501 20.2496 14.2512 20.2496Z"
            fill="currentColor"
          />
          <path
            d="M17.5777 23.9999H1.92616C1.42235 24.0057 0.936772 23.8116 0.575754 23.4602C0.214737 23.1087 0.00770565 22.6285 0 22.1247V6.71618C0.00215083 6.05974 0.262716 5.43055 0.725307 4.96479L4.96391 0.726183C5.19337 0.495213 5.46641 0.312101 5.76718 0.187465C6.06796 0.062829 6.39048 -0.000846655 6.71606 0.000126796H17.577C18.0806 -0.00568399 18.566 0.188433 18.9268 0.539932C19.2876 0.891432 19.4943 1.37164 19.5016 1.87528V22.127C19.4939 22.6302 19.2871 23.1098 18.9265 23.4608C18.5659 23.8119 18.0809 24.0057 17.5777 23.9999ZM6.71606 1.498C6.58773 1.49756 6.46059 1.52259 6.34201 1.57165C6.22343 1.6207 6.11576 1.69281 6.02524 1.78377L1.7859 6.02313C1.60348 6.20684 1.5008 6.45504 1.50013 6.71393V22.1225C1.50764 22.2284 1.55654 22.3271 1.63626 22.3973C1.71598 22.4675 1.82012 22.5035 1.92616 22.4975H17.577C17.6829 22.5035 17.7868 22.4674 17.8663 22.3972C17.9458 22.327 17.9944 22.2283 18.0015 22.1225V1.87078C17.9944 1.76497 17.9458 1.66624 17.8663 1.59603C17.7868 1.52582 17.6829 1.48978 17.577 1.49575L6.71606 1.498Z"
            fill="currentColor"
          />
          <path
            d="M5.62547 7.4985H3.00025C2.80132 7.4985 2.61054 7.41947 2.46988 7.27881C2.32921 7.13814 2.25019 6.94736 2.25019 6.74843C2.25019 6.54951 2.32921 6.35872 2.46988 6.21806C2.61054 6.0774 2.80132 5.99837 3.00025 5.99837H5.62547C5.72493 5.99837 5.82032 5.95886 5.89065 5.88853C5.96098 5.8182 6.0005 5.7228 6.0005 5.62334V2.99812C6.0005 2.79919 6.07952 2.60841 6.22019 2.46775C6.36085 2.32708 6.55163 2.24806 6.75056 2.24806C6.94949 2.24806 7.14027 2.32708 7.28094 2.46775C7.4216 2.60841 7.50063 2.79919 7.50063 2.99812V5.62334C7.50063 6.12066 7.30306 6.59762 6.9514 6.94928C6.59974 7.30094 6.12279 7.4985 5.62547 7.4985Z"
            fill="currentColor"
          />
        </svg>
        <span> download our PDF </span>
      </a>
    </div>

    <!-- ATTENTION -->
    <p class="z-10 block pt-8 text-xs text-white md:hidden">consectetur adipiscing elit</p>

    <!-- DÉCORATION -->
    <div
      class="absolute -top-10 -right-16 z-0 h-96 w-96 rounded-full bg-red-400 opacity-60 shadow-2xl md:left-[45%] md:top-[-150%] md:h-[800px] md:w-[800px]"
    ></div>
  </div>
</div>

<!-- BUY ME A BEER AND HELP SUPPORT OPEN-SOURCE RESOURCES -->
<div class="fixed bottom-0 right-0 z-10 mb-4 mr-4 flex items-end justify-end">
  <div>
    <a
      title="Buy me a beer"
      href="https://www.buymeacoffee.com/tonyricher"
      target="_blank"
      class="block h-12 w-full transform rounded-full shadow transition-all hover:rotate-12 hover:scale-110 hover:shadow-lg"
    >
      <img
        class="h-full w-full rounded-full object-cover object-center"
        src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=tonyricher&button_colour=FF5F5F&font_colour=ffffff&font_family=Cookie&outline_colour=000000&coffee_colour=FFDD00"
      />
    </a>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

How to create a Ask CTA with Tailwind CSS?

Here are the steps to create an Ask CTA with Tailwind CSS:

Step 1: Create an HTML structure

Create an HTML structure for your Ask CTA. You can use the following HTML code:

<div class="bg-white rounded-lg shadow-lg p-6">
  <h2 class="text-2xl font-bold mb-4">Join our newsletter</h2>
  <p class="text-gray-700 mb-4">Sign up for our newsletter and get the latest news and updates.</p>
  <a href="#" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Subscribe</a>
</div>

Step 2: Add Tailwind CSS to your project

To use Tailwind CSS, you need to add it to your project. You can do this by adding the following code to the head section of your HTML file:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

Step 3: Style the background and border

To style the background and border of your Ask CTA, you can use the following CSS classes:

bg-white rounded-lg shadow-lg p-6

Step 4: Style the headline

To style the headline of your Ask CTA, you can use the following CSS classes:

text-2xl font-bold mb-4

Step 5: Style the subheadline

To style the subheadline of your Ask CTA, you can use the following CSS classes:

text-gray-700 mb-4

Step 6: Style the button

To style the button of your Ask CTA, you can use the following CSS classes:

bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded

Conclusion

In this article, we have learned how to create an Ask CTA with Tailwind CSS in 6 easy steps. Tailwind CSS is a powerful CSS framework that can help you to create custom designs quickly. With Tailwind CSS, you can create responsive web designs that look great on all devices.