Home
ardianhu
Battery and signal

Battery and signal

Battery and signal bar component

This tailwind example is contributed by ardianhu, on 27-Dec-2024. Component is made with Tailwind CSS v3. It is responsive.

Card Badge

Author ardianhu

976

1

Fork Fullscreen

<div class="flex space-x-5">

<div class="white w-fit p-20 border-2 border border-green-500 rounded-2xl">
<div class="flex justify-center items-center">
<div class="flex justify-evenly items-center w-24 h-12 border-4 border-gray-300 rounded-lg bg-white">
  <div class="w-3 h-8 bg-green-500 "></div>
  <div class="w-3 h-8 bg-green-500"></div>
  <div class="w-3 h-8 bg-green-500"></div>
  <div class="w-3 h-8 bg-green-500"></div>
  <div class="w-3 h-8 bg-gray-300"></div> 
</div>
<div class="w-2 h-4 bg-gray-300 rounded-tr-sm rounded-br-sm"></div>
</div>
</div>

<div class="white w-fit p-20 border-2 border border-green-500 rounded-2xl">
  <div class="flex justify-evenly items-end w-24 h-12 rounded-lg bg-white">
  <div class="w-3 h-4 bg-green-500 rounded-full"></div>
  <div class="w-3 h-6 bg-green-500 rounded-full"></div>
  <div class="w-3 h-8 bg-green-500 rounded-full"></div>
  <div class="w-3 h-10 bg-green-500 rounded-full"></div>
  <div class="w-3 h-12 bg-gray-300 rounded-full"></div>
  </div>
</div>

</div>

Related Examples

IMDB score and votes box

Author:
Darius G

2 years ago

8.5k
Thankyou Card

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.5k
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

7 months ago

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

Author:
Indra

2 months ago

153
A product card with size selector
Using alpine it shows a size selector when clicking in cart

Author:
farid

10 months ago

1.2k
KPI Cards
estilo Shopify / Stripe

Author:
Raul antonio de la cruz hernandez

1 week ago

39
Update Profile
Update profile page with basic informations

Author:
Sedat Kumcu

1 year ago

2.7k
News Feed

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

1.5k
opulent
this a page didicated for laptops,phones using tailwindcss

Author:
ishimwe shadad

6 months ago

833
google ui cards
google ui cards

Author:
Anonymous

2 years ago

9.7k
beautifull Authentication Page
I create a Authentication page using cloude ai model.

Author:
Akram Khan

1 year ago

2.1k
Login form

Author:
Rajesh Maheshwari

9 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12