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

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

7 months ago

1.5k
Responsive Features Section

Author:
ariaw

8 months ago

956
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

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

1 year ago

3.4k
KPI Cards
estilo Shopify / Stripe

Author:
Raul antonio de la cruz hernandez

1 month ago

62
Responsive Working Process Section
This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

Author:
ABDO-SY

9 months ago

969
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

29.2k
Profile Card
User profile card

Author:
Ajay Thakur

2 months ago

106
Card with social media share buttons

Author:
Computer guy

2 years ago

9.1k
Product features cards

Author:
Henrik R.

1 year ago

4k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.1k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

1 year ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components