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

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

5 months ago

1.3k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 days ago

40
Card with social media share buttons

Author:
Computer guy

2 years ago

9.1k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

6 months ago

880
Tailwind AoPS Demo
Starter code for an interactive Tailwind Demo

Author:
Joseph Barron

1 year ago

3.7k
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Ahmath S.

1 month ago

337
Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

2.9k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Quentin Rivers

1 year ago

2.6k
Responsive Features Section

Author:
ariaw

6 months ago

677
Call to Action Box

Author:
Aitrik Saha

9 months ago

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

Author:
Robert Chunga

11 months ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components