Home
Hunter Guru
Form package

Form package

This tailwind example is contributed by Hunter Guru, on 03-May-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Hunter Guru

2.6k

Fork Fullscreen

<div class="border-blue-600 rounded-2xl border  max-w-sm mx-auto"
    style="box-shadow: rgba(45, 50, 130, 0.15) 0px 12px 16px -4px, rgba(45, 50, 130, 0.15) 0px 4px 6px -2px;">
    <div class="pt-6 px-6">
      <div class="flex itmes-center">
          <span class="pr-2">
            <input id="default-checkbox" type="checkbox" value="" class="h-full text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
          </span>
          <h2 class="text-xl font-semibold text-gray-600">Package 1</h2>
      </div>
    </div>      
    <div class="px-6 pt-5 pb-8">
        <h3 class="text-sm font-medium text-gray-900">What's included</h3>
        <ul role="list" class="mt-4 space-y-4">
            <li class="flex space-x-3">
                <div class="flex justify-center items-center rounded-full bg-green-100 h-5 w-5"><svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
                        class="h-3 w-3 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M20.707 5.293a1 1 0 010 1.414l-11 11a1 1 0 01-1.414 0l-5-5a1 1 0 111.414-1.414L9 15.586 19.293 5.293a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                </div>
                <span class="text-sm text-gray-500">5 workspaces</span>
            </li>
            <li class="flex space-x-3">
                <div class="flex justify-center items-center rounded-full bg-green-100 h-5 w-5"><svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
                        class="h-3 w-3 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M20.707 5.293a1 1 0 010 1.414l-11 11a1 1 0 01-1.414 0l-5-5a1 1 0 111.414-1.414L9 15.586 19.293 5.293a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                </div>
                <span class="text-sm text-gray-500">Unlimited testimonials</span>
            </li>
        </ul>
    </div>
</div>

Related Examples

Pricing Table

Author:
Akshay

3 years ago

11k
Card-Product
Item or card to show products

Author:
Ameth Galarcio

1 year ago

3.9k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

4 months ago

375
Cards Seaction - Services block

Author:
ABDO-SY

10 months ago

1.6k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

3 years ago

24.1k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.5k
Update Profile
Update profile page with basic informations

Author:
Sedat Kumcu

1 year ago

2.9k
Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

3.1k
Twitter tweet clone
Replica of twitter tweet card

Author:
Sophia Baker

3 years ago

10k
Info card

Author:
Samuel Dawson

3 years ago

10.2k
google ui cards
google ui cards

Author:
Anonymous

2 years ago

9.8k
Feature Highlights cards

Author:
Carla Hoffman

1 year ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components