Home > Tailwind Components > Textarea

Tailwind CSS Textarea

1. Tailwind Card Blogpost

Blog Image

How to Use Tailwind CSS in Projects

Tailwind CSS is a utility-first CSS framework that allows for rapid UI development...

July 12, 2023
CSS Tailwind
Read More 
<div class="max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="/ui/images/pexels-suliman-sallehi-1540963.jpg" alt="Blog Image">
    <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800">How to Use Tailwind CSS in Projects</h2>
        <p class="mt-2 text-gray-600">Tailwind CSS is a utility-first CSS framework that allows for rapid UI development...</p>
        <div class="flex items-center justify-between mt-3">
            <span class="text-sm text-gray-500">July 12, 2023</span>
            <div class="flex">
                <span class="bg-blue-100 text-blue-500 text-xs px-2 py-1 rounded-full mr-2">CSS</span>
                <span class="bg-purple-100 text-purple-500 text-xs px-2 py-1 rounded-full">Tailwind</span>
            </div>
        </div>
        <a href="#" class="block mt-4 text-blue-600 hover:underline flex items-center">
            Read More
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
        </a>
    </div>
</div>

2. Tailwind Card Profile

Profile Image

John Doe

Frontend Developer

Passionate developer with a love for creating stunning UI/UX designs.

<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="/ui/images/pexels-suliman-sallehi-3527286.jpg" alt="Profile Image">
    <div class="p-4">
        <h2 class="text-2xl font-semibold text-gray-800">John Doe</h2>
        <p class="text-gray-600">Frontend Developer</p>
        <p class="mt-2 text-gray-500">Passionate developer with a love for creating stunning UI/UX designs.</p>
        <div class="flex mt-3">
            <button class="bg-blue-500 text-white px-4 py-2 rounded-lg mr-2 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 8a6 6 0 00-12 0v6a6 6 0 0012 0V8z" />
                </svg>
                Follow
            </button>
            <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16h6M4 6h16M4 6a2 2 0 01-2 2M20 6a2 2 0 012 2M4 6v14a2 2 0 002 2h12a2 2 0 002-2V6" />
                </svg>
                Message
            </button>
        </div>
    </div>
</div>

3. Tailwind Card Product Rating

Product Image

Product Name

$24.99

(34 reviews) 
<div class="max-w-sm mx-auto bg-white border border-gray-200 rounded-lg shadow-md">
    <img class="w-full h-48 object-cover" src="/ui/images/pexels-pixabay-371864.jpg" alt="Product Image">
    <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900">Product Name</h3>
        <p class="text-gray-700 mt-1">$24.99</p>
        <div class="flex items-center mt-2">
            <div class="flex text-yellow-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.518 4.674a1 1 0 00.95.69h4.908c.969 0 1.371 1.24.588 1.81l-3.977 2.892a1 1 0 00-.364 1.118l1.518 4.674c.3.921-.755 1.688-1.539 1.118l-3.977-2.892a1 1 0 00-1.176 0l-3.977 2.892c-.784.57-1.838-.197-1.539-1.118l1.518-4.674a1 1 0 00-.364-1.118L2.484 10.1c-.783-.57-.38-1.81.588-1.81h4.908a1 1 0 00.95-.69l1.518-4.674z"/>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.518 4.674a1 1 0 00.95.69h4.908c.969 0 1.371 1.24.588 1.81l-3.977 2.892a1 1 0 00-.364 1.118l1.518 4.674c.3.921-.755 1.688-1.539 1.118l-3.977-2.892a1 1 0 00-1.176 0l-3.977 2.892c-.784.57-1.838-.197-1.539-1.118l1.518-4.674a1 1 0 00-.364-1.118L2.484 10.1c-.783-.57-.38-1.81.588-1.81h4.908a1 1 0 00.95-.69l1.518-4.674z"/>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.518 4.674a1 1 0 00.95.69h4.908c.969 0 1.371 1.24.588 1.81l-3.977 2.892a1 1 0 00-.364 1.118l1.518 4.674c.3.921-.755 1.688-1.539 1.118l-3.977-2.892a1 1 0 00-1.176 0l-3.977 2.892c-.784.57-1.838-.197-1.539-1.118l1.518-4.674a1 1 0 00-.364-1.118L2.484 10.1c-.783-.57-.38-1.81.588-1.81h4.908a1 1 0 00.95-.69l1.518-4.674z"/>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.518 4.674a1 1 0 00.95.69h4.908c.969 0 1.371 1.24.588 1.81l-3.977 2.892a1 1 0 00-.364 1.118l1.518 4.674c.3.921-.755 1.688-1.539 1.118l-3.977-2.892a1 1 0 00-1.176 0l-3.977 2.892c-.784.57-1.838-.197-1.539-1.118l1.518-4.674a1 1 0 00-.364-1.118L2.484 10.1c-.783-.57-.38-1.81.588-1.81h4.908a1 1 0 00.95-.69l1.518-4.674z"/>
                </svg>
            </div>
            <span class="text-gray-600 text-sm ml-2">(34 reviews)</span>
        </div>
        <button class="w-full mt-4 bg-green-500 text-white py-2 rounded-lg hover:bg-green-600 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2 5m0 0h16m-16 0a2 2 0 002 2h12a2 2 0 002-2m-2-5H7" />
            </svg>
            Add to Cart
        </button>
    </div>
</div>

4. Tailwind Card Testimonial

User

Jane Smith

Marketing Expert

“Tailwind CSS has made my workflow so much faster. I can quickly build responsive components and customize them with ease. Highly recommend it!”

<div class="max-w-md mx-auto bg-white shadow-lg rounded-lg p-6 border border-gray-200">
    <div class="flex items-center">
        <img class="w-16 h-16 rounded-full" src="/ui/images/person-1.jpg" alt="User">
        <div class="ml-4">
            <h3 class="text-xl font-semibold text-gray-800">Jane Smith</h3>
            <p class="text-gray-600">Marketing Expert</p>
        </div>
    </div>
    <p class="mt-4 text-gray-700">“Tailwind CSS has made my workflow so much faster. I can quickly build responsive components and customize them with ease. Highly recommend it!”</p>
    <div class="mt-4 text-yellow-500 flex">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.518 4.674a1 1 0 00.95.69h4.908c.969 0 1.371 1.24.588 1.81l-3.977 2.892a1 1 0 00-.364 1.118l1.518 4.674c.3.921-.755 1.688-1.539 1.118l-3.977-2.892a1 1 0 00-1.176 0l-3.977 2.892c-.784.57-1.838-.197-1.539-1.118l1.518-4.674a1 1 0 00-.364-1.118L2.484 10.1c-.783-.57-.38-1.81.588-1.81h4.908a1 1 0 00.95-.69l1.518-4.674z"/>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.518 4.674a1 1 0 00.95.69h4.908c.969 0 1.371 1.24.588 1.81l-3.977 2.892a1 1 0 00-.364 1.118l1.518 4.674c.3.921-.755 1.688-1.539 1.118l-3.977-2.892a1 1 0 00-1.176 0l-3.977 2.892c-.784.57-1.838-.197-1.539-1.118l1.518-4.674a1 1 0 00-.364-1.118L2.484 10.1c-.783-.57-.38-1.81.588-1.81h4.908a1 1 0 00.95-.69l1.518-4.674z"/>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.518 4.674a1 1 0 00.95.69h4.908c.969 0 1.371 1.24.588 1.81l-3.977 2.892a1 1 0 00-.364 1.118l1.518 4.674c.3.921-.755 1.688-1.539 1.118l-3.977-2.892a1 1 0 00-1.176 0l-3.977 2.892c-.784.57-1.838-.197-1.539-1.118l1.518-4.674a1 1 0 00-.364-1.118L2.484 10.1c-.783-.57-.38-1.81.588-1.81h4.908a1 1 0 00.95-.69l1.518-4.674z"/>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.518 4.674a1 1 0 00.95.69h4.908c.969 0 1.371 1.24.588 1.81l-3.977 2.892a1 1 0 00-.364 1.118l1.518 4.674c.3.921-.755 1.688-1.539 1.118l-3.977-2.892a1 1 0 00-1.176 0l-3.977 2.892c-.784.57-1.838-.197-1.539-1.118l1.518-4.674a1 1 0 00-.364-1.118L2.484 10.1c-.783-.57-.38-1.81.588-1.81h4.908a1 1 0 00.95-.69l1.518-4.674z"/>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.518 4.674a1 1 0 00.95.69h4.908c.969 0 1.371 1.24.588 1.81l-3.977 2.892a1 1 0 00-.364 1.118l1.518 4.674c.3.921-.755 1.688-1.539 1.118l-3.977-2.892a1 1 0 00-1.176 0l-3.977 2.892c-.784.57-1.838-.197-1.539-1.118l1.518-4.674a1 1 0 00-.364-1.118L2.484 10.1c-.783-.57-.38-1.81.588-1.81h4.908a1 1 0 00.95-.69l1.518-4.674z"/>
        </svg>
    </div>
</div>

5. Tailwind Card Service

Web Development

We offer professional web development services that cater to businesses of all sizes. Build responsive and dynamic websites with us.

<div class="max-w-sm mx-auto bg-white border border-gray-200 rounded-lg shadow-md p-6">
    <div class="flex justify-center items-center w-16 h-16 bg-green-100 text-green-500 rounded-full mx-auto">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
        </svg>
    </div>
    <h3 class="text-xl font-semibold text-center mt-4 text-gray-900">Web Development</h3>
    <p class="text-gray-600 text-center mt-2">We offer professional web development services that cater to businesses of all sizes. Build responsive and dynamic websites with us.</p>
    <button class="mt-6 w-full bg-green-500 text-white py-2 rounded-lg hover:bg-green-600 flex items-center justify-center">
        Learn More
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
        </svg>
    </button>
</div>

6. Tailwind Card Pricing

Pro Plan

$49/month

  • 10 Projects
  • 24/7 Support
  • Unlimited Storage 
<div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg shadow-lg overflow-hidden">
    <div class="bg-blue-500 text-white text-center py-6">
        <h3 class="text-2xl font-semibold">Pro Plan</h3>
        <p class="text-xl mt-2">$49/month</p>
    </div>
    <div class="p-6">
        <ul class="space-y-2">
            <li class="flex items-center text-gray-700">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                10 Projects
            </li>
            <li class="flex items-center text-gray-700">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                24/7 Support
            </li>
            <li class="flex items-center text-gray-700">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Unlimited Storage
            </li>
        </ul>
        <button class="w-full mt-6 bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 flex items-center justify-center">
            Get Started
        </button>
    </div>
</div>

7. Tailwind Card Highlight

Easy Customization

Tailwind CSS allows for quick customization with utility-first classes. Build custom designs faster with more flexibility.

<div class="max-w-sm mx-auto bg-white border border-gray-200 rounded-lg p-6 shadow-md">
    <div class="flex justify-center items-center w-16 h-16 bg-purple-100 text-purple-500 rounded-full mx-auto">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
    </div>
    <h3 class="text-xl font-semibold text-center mt-4 text-gray-900">Easy Customization</h3>
    <p class="text-gray-600 text-center mt-2">Tailwind CSS allows for quick customization with utility-first classes. Build custom designs faster with more flexibility.</p>
</div>

8. Tailwind Card Team Member

Team Member

Emily Johnson

UI/UX Designer

Emily specializes in crafting beautiful and user-friendly interfaces for web and mobile apps.

<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="/ui/images/pexels-yuri-manei-3190334.jpg" alt="Team Member">
    <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-900">Emily Johnson</h2>
        <p class="text-gray-600">UI/UX Designer</p>
        <p class="mt-2 text-gray-500">Emily specializes in crafting beautiful and user-friendly interfaces for web and mobile apps.</p>
        <div class="flex mt-4 space-x-3">
            <a href="#" class="text-blue-500 hover:text-blue-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2.04c-5.523 0-10 4.477-10 10 0 4.536 3.043 8.338 7.255 9.582-.101-.873-.192-2.218.04-3.17.2-.826 1.284-5.256 1.284-5.256s-.327-.654-.327-1.623c0-1.518.879-2.653 1.97-2.653.929 0 1.378.697 1.378 1.533 0 .935-.593 2.331-.899 3.629-.255 1.079.537 1.958 1.592 1.958 1.91 0 3.377-2.015 3.377-4.914 0-2.568-1.845-4.368-4.482-4.368-3.056 0-4.849 2.288-4.849 4.66 0 .926.356 1.924.8 2.464.089.107.102.2.076.307-.08.33-.261 1.039-.297 1.182-.047.185-.152.225-.353.135-1.313-.57-2.13-2.354-2.13-3.795 0-3.091 2.248-5.925 6.487-5.925 3.406 0 6.045 2.431 6.045 5.687 0 3.373-2.13 6.085-5.093 6.085-1.009 0-1.958-.527-2.282-1.151l-.619 2.355c-.226.86-.837 1.939-1.247 2.599.942.292 1.935.451 2.968.451 5.523 0 10-4.477 10-10s-4.477-10-10-10z"/>
                </svg>
            </a>
            <a href="#" class="text-blue-500 hover:text-blue-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M19.633 7.997c.013.178.013.355.013.533 0 5.425-4.129 11.67-11.67 11.67-2.318 0-4.477-.682-6.294-1.86.323.037.64.05.975.05 1.924 0 3.692-.655 5.095-1.757-1.796-.037-3.308-1.204-3.832-2.812.25.037.506.062.77.062.37 0 .732-.05 1.073-.144-1.882-.38-3.298-2.04-3.298-4.03v-.05c.555.31 1.19.497 1.865.517-1.11-.74-1.843-2.005-1.843-3.442 0-.76.204-1.47.56-2.08 2.032 2.49 5.074 4.127 8.495 4.305-.062-.303-.1-.615-.1-.937 0-2.275 1.845-4.12 4.12-4.12 1.185 0 2.257.497 3.005 1.297.93-.178 1.806-.52 2.597-.982-.307.957-.957 1.757-1.804 2.26.825-.1 1.614-.318 2.347-.64-.555.82-1.26 1.537-2.075 2.112z"/>
                </svg>
            </a>
        </div>
    </div>
</div>

9. Tailwind Info Card

Basic Info Card

This is a basic card with minimal information and a button. 

<div class="max-w-sm rounded overflow-hidden shadow-lg p-5 bg-white">
  <div class="font-bold text-xl mb-2">Basic Info Card</div>
  <p class="text-gray-700 text-base">
    This is a basic card with minimal information and a button.
  </p>
  <div class="mt-4">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Learn More
    </button>
  </div>
</div>