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

835

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

6 months ago

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

Author:
Indra

2 months ago

131
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

166
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

28.6k
Responsive Article Section

Author:
Prashant

3 years ago

16.3k
Tailwind image grid
tailwind picture grid

Author:
Anonymous

1 year ago

9.9k
offer card

Author:
ABDO-SY

7 months ago

797
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

8 months ago

1.1k
Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

2.9k
Info cards for admin panal

Author:
Sophia Baker

2 years ago

9.5k

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