Tailwind list-style-image

In this tutorial we will see List Group, List Group hover, List Group divider , List Group icon, List Group Badge, examples with Tailwind CSS

Tool Use

Tailwind CSS 2.x
unsplash Image

👉 View Demo

Setup Project Using CDN

href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

The Easiest way to install Tailwind CSS with Tailwind CLI

How to Install Tailwind CSS with NPM

Example 1

Simple List Group

class="w-1/3 bg-white rounded-lg shadow"> class="divide-y-2 divide-gray-100"> class="p-3">List Item 1 class="p-3">List Item 2 class="p-3">List Item 3 class="p-3">List Item 4

Example 2

List Group with Hover

class="bg-white rounded-lg shadow lg:w-1/3"> class="divide-y divide-gray-100"> class="p-3 hover:bg-blue-600 hover:text-blue-200"> List Item 1 class="p-3 hover:bg-blue-600 hover:text-blue-200"> List Item 2 class="p-3 hover:bg-blue-600 hover:text-blue-200"> List Item 3 class="p-3 hover:bg-blue-600 hover:text-blue-200"> List Item 4

Example 3

Responsive List Group

class="w-full bg-white rounded-lg shadow-lg lg:w-1/3"> class="divide-y-2 divide-gray-100"> class="p-3 hover:bg-blue-600 hover:text-blue-200"> List Item 1 class="p-3 hover:bg-blue-600 hover:text-blue-200"> List Item 2 class="p-3 hover:bg-blue-600 hover:text-blue-200"> List Item 3 class="p-3 hover:bg-blue-600 hover:text-blue-200"> List Item 4

Example 4

List Group with Badge and Icon

class="w-full bg-white rounded-lg shadow-lg lg:w-1/3"> class="divide-y-2 divide-gray-400"> class="flex justify-between p-3 hover:bg-blue-600 hover:text-blue-200"> View List Item xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" /> class="flex justify-between p-3 hover:bg-blue-600 hover:text-blue-200"> Edit List Item xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> class="flex items-center justify-between p-3 hover:bg-blue-600 hover:text-blue-200"> Messages class="px-2 py-1 text-sm text-blue-200 bg-blue-600 rounded-full">+1

👉 For more tailwind css

Top List List

Tailwind list-style-image

Tool Use

Example 1

Example 2

Example 3

Example 4

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội