Sample1

This tailwind example is contributed by Anuj Kamboj, on 05-Sep-2024. Component is made with Tailwind v3.4. It is responsive.

Select

Author Anuj Kamboj

Tailwind v3.4 139

Fork Fullscreen

<div class="flex flex-row flex-wrap p-4 rounded-md border-4 border-green-200  gap-4 ">
  <div class="w-32 h-32 bg-gray-500 rounded-md border-2 border-black text-2xl antialiased font-semibold flex items-center justify-center">
    A
  </div>
  <div class="w-32 h-32 bg-gray-500 rounded-md border-2 border-black text-2xl antialiased font-semibold flex items-center justify-center">
    B
  </div>
  <div class="w-32 h-32 bg-gray-500 rounded-md border-2 border-black text-2xl antialiased font-semibold flex items-center justify-center">
    C
  </div>
  <div class="w-32 h-32 bg-gray-500 rounded-md border-2 border-black text-2xl antialiased font-semibold flex items-center justify-center">
    D
  </div>
  <div class="w-32 h-32 bg-gray-500 rounded-md border-2 border-black text-2xl antialiased font-semibold flex items-center justify-center">
    E
  </div>
  <div class="w-32 h-32 bg-gray-500 rounded-md border-2 border-black text-2xl antialiased font-semibold flex items-center justify-center">
    F
  </div>
  <div class="w-32 h-32 bg-gray-500 rounded-md border-2 border-black text-2xl antialiased font-semibold flex items-center justify-center">
    G
  </div>
  <div class="w-32 h-32 bg-gray-500 rounded-md border-2 border-black text-2xl antialiased font-semibold flex items-center justify-center">
    H
  </div>
  <div class="w-32 h-32 bg-gray-500 rounded-md border-2 border-black text-2xl antialiased font-semibold flex items-center justify-center">
    I
  </div>
</div>

Related Examples

Pricing Plan Selector
radio buttons for selecting a pricing plan

Rafferty Kim

2 years ago

10.9k
Dropdown select on hover
this example does not uses javascript

Alok

3 years ago

31.3k
canvas fully covers
canvas fully covers

Balogun David Olajuwon

1 year ago

1.2k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

ABDESLAMI ACHRAF

1 year ago

4.4k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

SANJAY SINGH GARIYA

1 year ago

2.3k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Anonymous

1 year ago

2.4k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Anonymous

1 year ago

1.7k
Multiple select input with alpine js
select input where you can select multiple items

Nomusa Botha

2 years ago

6.8k
canvas fully covers
canvas fully covers

ABDESLAMI ACHRAF

1 year ago

5.1k
register
helps us to be learn easy

Nishimwe Jeanine

1 year ago

1.1k
Search bar with filter options

Piet Vriend

3 years ago

26.3k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Mehmet Kaplan

2 years ago

4.3k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.