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

2.7k

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

1 year ago

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

9 months ago

1.8k
Hotel rooms
A simple room overview

Author:
Matti

1 year ago

1.8k
Article-Post Preview card

Author:
Prashant

3 years ago

10.1k
Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Author:
Mr Robot

3 years ago

13.9k
Kids E-learning Platform Card
Kids E-learning Platform Card Clone

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

1 year ago

1.8k
Image card

Author:
Laurits

3 years ago

17.6k
Product Card for eCommerce
Here is a Product Card with discount badge, price with discount and price normally. On other hand, buttons for up or down quantity and add to cart button. This is create for Grid Columns, wich can 4 or 5 depend for desktop

Author:
Andrés Abarzúa

8 months ago

982
Hello Acode Master! 👋
is a passionate software developer based in Rubavu. He considers himself the top developer in the area and is committed to solving real-world problems through technology.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

873
Profile Card

Author:
Crimson

1 year ago

1.6k
Admin dashboard cards
Card groups for showing stats/info.

Author:
Gopi Yadav

3 years ago

21.6k
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

4.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components