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

1k

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.7k
Thankyou Card

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

1 year ago

5.8k
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

9 months ago

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

Author:
Indra

5 months ago

404
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Author:
Ragnar lodbrok

2 years ago

5.3k
Card Slider

Author:
Maxim

10 months ago

1.5k
Responsive Card Section With Hover Effect
added more cards with ui friendly

Author:
SAI BENDE

6 months ago

582
Card Cartier Product
Card Based View of Cartier

Author:
Ameth Galarcio

11 months ago

855
Badges for showing status

Author:
Conan Hilton

3 years ago

9.7k
Créer une story
Créer une story

Author:
Omer fils ELENGA

2 months ago

316
Feature card

Author:
Matti

1 year ago

1.1k
Coard Component 299b
un

Author:
Kaung Htet Min

3 months ago

362

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

© 2026 TailwindFlex. All Rights Reserved.

v1.12