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 4

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

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

1k
Card with Dark Mode
For blog post and e-commerce websites

OmKar Mehta

2 years ago

2.8k
Form package

Hunter Guru

2 years ago

3k
card profie
profile card

Aman kumar

2 years ago

4.8k
Signup page- Paper / Hand-drawn UI

Akram Khan

1 year ago

1.2k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Amit Pachange

2 years ago

5.7k
Rwandan farmers with Canadian markets through sustainable, fair trade practices.
Key Features of This Website: Professional Design: Clean, modern interface with orange/green color scheme representing mangoes and agriculture Fully responsive layout that works on all devices Comprehensive Sections: Hero section highlighting the Rwanda-Canada mango trade Product showcase with different mango varieties Current market pricing table Detailed farm-to-table process explanation Company information and impact metrics Testimonials from partners Contact form and information Trade-Specific Content: Focus on Rwandan mango varieties suitable for Canadian markets Pricing in both USD and kg units common in agricultural trade Information about certifications and compliance Shipping and logistics details User Experience: Clear calls-to-action for quotes and orders Easy navigation between sections Newsletter signup for market updates Contact information prominently displayed Trust Elements: Certifications and compliance badges Impact statistics showing benefits to Rwandan farmers Testimonials from Canadian partners

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.9k
Food delivery ecommerce Card

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

1 year ago

2.8k
Avtar Cards
this is cards, for the profile section

pablitodgb

1 year ago

844

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.