Battery and signal

Battery and signal bar component

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

Author ardianhu

Tailwind v3.4 1.4k 5

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

Darius G

3 years ago

9.1k
Thankyou Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.6k
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.

Hamza Atig

1 year ago

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

Indra

1 year ago

1.1k
Interactive 3D Morphing Globe - Sphere to Star
3D interactive particle globe that morphs between a sphere and a star shape. Features custom glassmorphism UI, click-to-pulse bloom effects, and dynamic color themes. Built by Mostafa Niloy (Visernic Limited) using Three.js and Tailwind CSS.

Visernic

5 months ago

524
Product Card
e-commerce product card

JUGENDRA GANGWAR

1 day ago

6
Login form

Rajesh Maheshwari

1 year ago

2.6k
Card Cartier Product
Card Based View of Cartier

Ameth Galarcio

1 year ago

1.5k
Team Section

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

2.9k
Product Card

Maxim

1 year ago

2.1k
content section

Crimson

1 year ago

1.6k
Team section
beautiful responsive our team section

Rajesh Maheshwari

1 year ago

2k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.