A sleek, responsive, and highly aesthetic podcast player component built with Vue 3, Vite, and Tailwind CSS. This player is inspired by the minimalist and sophisticated design language of Radiolab.org.
- Radiolab Aesthetic: Clean whitespace, elegant "Poppins" typography, and a very light grey (
bg-gray-50) body contrast. - Dynamic Ghost Button: Interactive "Listen" button that transitions from a ghost state to a solid black pill on hover.
- Clean Overlapping Popup: A custom-styled dropdown menu for platform links (Apple, SoundCloud, YouTube) and downloads that overlaps the card rather than pushing content down.
- Progress Tracking: A functional progress bar with real-time time stamps.
- Fully Responsive: Designed to look great on mobile and desktop.
- Optimized Images: Full-bleed image header with perfect object-fit scaling.
- Framework: Vue.js 3 (SFC)
- Build Tool: Vite
- Styling: Tailwind CSS
- UI Components: Flowbite Vue
- Fonts: Poppins (Google Fonts)
Make sure you have Node.js installed.
-
Clone the repository:
git clone [https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git](https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git) cd YOUR_REPO_NAME -
Install dependencies: npm install
-
Run the development server: npm run dev
The component is highly modular. To change the theme colors or card dimensions, you can modify the <style> section in PodcastPlayer.vue:
/_ Update the brand color here / .listen-ghost-btn:hover, .action-button:hover { background-color: #6b21a8 !important; / Brand Purple _/ }
Distributed under the MIT License. See LICENSE for more information.
Build with ❤️ and curiosity.