Logo

Tailwind Components

Docs TailwindCSS

Categories

General Template

general-template

5

Components

Forms and Input

forms-and-input

Tanpa deskripsi.

14 Jun 2026 3 sections

Breadcrumb

breadcrumb

Tanpa deskripsi.

14 Jun 2026 6 sections

Row and Column

row-and-column

Tanpa deskripsi.

14 Jun 2026 6 sections

Card

card

Tanpa deskripsi.

11 Jun 2026 10 sections

Button

button

Button templates for General views and work for any website

11 Jun 2026 9 sections

Preview & Code

Flexbox system

Preview

w-1/2 (50%)
w-1/2 (50%)

Code

<div class="flex gap-4 mb-8">
    <div class="w-1/2 bg-blue-500 p-6 rounded-lg text-white font-bold text-center">
        w-1/2 (50%)
    </div>
    <div class="w-1/2 bg-red-500 p-6 rounded-lg text-white font-bold text-center">
        w-1/2 (50%)
    </div>
</div>

Average Column

Preview

w-1/3 (33.3%)
w-1/3 (33.3%)
w-1/3 (33.3%)

Code

<div class="flex gap-4 mb-8">
    <div class="w-1/3 bg-emerald-500 p-6 rounded-lg text-white font-bold text-center">
        w-1/3 (33.3%)
    </div>
    <div class="w-1/3 bg-purple-500 p-6 rounded-lg text-white font-bold text-center">
        w-1/3 (33.3%)
    </div>
    <div class="w-1/3 bg-pink-500 p-6 rounded-lg text-white font-bold text-center">
        w-1/3 (33.3%)
    </div>
</div>

Inaverge Column

Preview

w-1/4 (Sidebar)
w-3/4 (Konten Utama)

Code

<div class="flex gap-4 mb-8">
    <div class="w-1/4 bg-gray-800 p-6 rounded-lg text-white font-bold text-center">
        w-1/4 (Sidebar)
    </div>
    <div class="w-3/4 bg-amber-500 p-6 rounded-lg text-white font-bold text-center">
        w-3/4 (Konten Utama)
    </div>
</div>

CSS Grid

Preview

Kolom 1
Kolom 2

Code

<div class="grid grid-cols-2 gap-4 mb-8">
    <div class="bg-indigo-500 p-6 rounded-lg text-white font-bold text-center">
        Kolom 1
    </div>
    <div class="bg-teal-500 p-6 rounded-lg text-white font-bold text-center">
        Kolom 2
    </div>
</div>

Grid 12 Column (like bootstrap)

Preview

col-span-8
col-span-4
col-span-3
col-span-6 (Tengah)
col-span-3

Code

<div class="grid grid-cols-12 gap-4 mb-8">
    <!-- col-8 -->
    <div class="col-span-8 bg-cyan-600 p-6 rounded-lg text-white font-bold text-center">
        col-span-8
    </div>
    <!-- col-4 -->
    <div class="col-span-4 bg-orange-600 p-6 rounded-lg text-white font-bold text-center">
        col-span-4
    </div>

    <!-- col-3 -->
    <div class="col-span-3 bg-lime-600 p-6 rounded-lg text-white font-bold text-center">
        col-span-3
    </div>
    <!-- col-6 -->
    <div class="col-span-6 bg-fuchsia-600 p-6 rounded-lg text-white font-bold text-center">
        col-span-6 (Tengah)
    </div>
    <!-- col-3 -->
    <div class="col-span-3 bg-rose-600 p-6 rounded-lg text-white font-bold text-center">
        col-span-3
    </div>
</div>

Responsive Grid

Preview

Item 1
Item 2
Item 3
Item 4

Code

<!-- 
  Di HP: 1 Kolom (grid-cols-1)
  Di Tablet: 2 Kolom (md:grid-cols-2)
  Di Laptop/PC: 4 Kolom (lg:grid-cols-4)
-->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
    <div class="bg-blue-400 p-6 rounded-lg text-white font-bold text-center">
        Item 1
    </div>
    <div class="bg-red-400 p-6 rounded-lg text-white font-bold text-center">
        Item 2
    </div>
    <div class="bg-green-400 p-6 rounded-lg text-white font-bold text-center">
        Item 3
    </div>
    <div class="bg-yellow-400 p-6 rounded-lg text-white font-bold text-center">
        Item 4
    </div>
</div>