Home
Ameth Galarcio
Play Music - Reproductor

Play Music - Reproductor

Multimedia music player, with its respective dark mode

This tailwind example is contributed by Ameth Galarcio, on 09-Jul-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card Widget

Author Ameth Galarcio

Fork Fullscreen

<div class="bg-white rounded-lg drop-shadow p-4 dark:bg-black dark:shadow-white">
  <div class="flex flex-col justify-center items-center ">
    <img class="rounded-lg aspect-square w-64" src="https://is1-ssl.mzstatic.com/image/thumb/Music116/v4/d5/37/f0/d537f0d1-5cfd-ce67-d7ac-0c4151f63f70/23UMGIM17915.rgb.jpg/1200x1200bb.jpg"/>
    <p class="mt-2 font-semibold text-md text-gray-600">I ain't worried</p>
    <p class="font-semibold text-xs text-gray-600">One Republic</p>
  </div>
  <div class="flex flex-col justify-center items-center my-4">
    <input type="range" value="30"  class="rounded-lg overflow-hidden appearance-none bg-gray-200 h-1 w-full" />
    <div class="flex justify-between w-3/5 items-center my-2">
      <button class="aspect-square bg-white flex justify-center items-center rounded-full p-2 shadow-lg dark:bg-gray-800">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="#816cfa" fill-rule="evenodd" d="M7 6a1 1 0 0 1 2 0v4l6.4-4.8A1 1 0 0 1 17 6v12a1 1 0 0 1-1.6.8L9 14v4a1 1 0 1 1-2 0z" clip-rule="evenodd"/></svg>
      </button>
      <button class="aspect-square bg-white flex justify-center items-center rounded-full p-2 shadow-lg dark:bg-gray-800">
        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 512 512"><path fill="#816cfa" d="M133 440a35.37 35.37 0 0 1-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37 7.46-27.53 19.46-34.33a35.13 35.13 0 0 1 35.77.45l247.85 148.36a36 36 0 0 1 0 61l-247.89 148.4A35.5 35.5 0 0 1 133 440"/></svg>
      </button>
      <button class=" aspect-square bg-white flex justify-center items-center rounded-full p-2 shadow-lg dark:bg-gray-800">
          <svg class="rotate-180" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="#816cfa" fill-rule="evenodd" d="M7 6a1 1 0 0 1 2 0v4l6.4-4.8A1 1 0 0 1 17 6v12a1 1 0 0 1-1.6.8L9 14v4a1 1 0 1 1-2 0z" clip-rule="evenodd"/></svg>
        </button>
    </div>
  </div>
</div>

Related Examples

Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Author:
Ameth Galarcio

2 years ago

3.2k
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

Author:
dev-fab250

1 year ago

2.4k
Minimal Card
This is awesome looking card

Author:
Shaik Sameer Basha

2 years ago

3.3k
Products Layout
An ecommerce store front product list layout

Author:
Developer Kwame

11 months ago

1.1k
beautifull project Item

Author:
Akram Khan

2 years ago

2.8k
Music Player

Author:
Abhijit Sen

3 years ago

18.4k
Product review card

Author:
Rama krishnan Subramanian

1 year ago

2.6k
google ui cards
google ui cards

Author:
Anonymous

3 years ago

10.6k
myCard
card with image,title,body

Author:
farisubuntu

2 years ago

3.2k
Shopping Cart -Card

Author:
ABDO-SY

1 year ago

2.6k
Ripple Animation
Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader,Author box, User information,Transitions

Author:
Tofayel Islam

8 months ago

791
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

1 year ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components