Music Player

Tailwind CSS code for a simple music player

\r\n <div class=\"flex flex-col px-2 w-full\">\r\n \r\n <span class=\"text-sm text-red-500 capitalize font-semibold pt-1\">\r\n I think I need a sunrise, I'm tired of the sunset \r\n <\/span>\r\n <span class=\"text-xs text-gray-500 uppercase font-medium \">\r\n -\"Boston,\" Augustana\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex border-b py-3 cursor-pointer hover:shadow-md px-2 \">\r\n <img class='w-10 h-10 object-cover rounded-lg' alt='User avatar' src=https://www.creative-tim.com/twcomponents/component/'https:////images.unsplash.com//photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200'>\r\n <div class=\"flex flex-col px-2 w-full\">\r\n \r\n <span class=\"text-sm text-red-500 capitalize font-semibold pt-1\">\r\n I think I need a sunrise, I'm tired of the sunset \r\n <\/span>\r\n <span class=\"text-xs text-gray-500 uppercase font-medium \">\r\n -\"Boston,\" Augustana\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>","author_type":"App\\User","author_id":4343,"collection_id":null,"fork_id":null,"votes":7,"score":"4.3","visits":5840,"popularity":546,"slug":"music-player-1","approved":1,"created_at":"2021-08-12T00:00:00.000000Z","updated_at":"2024-09-19T04:17:35.000000Z","downloads":92,"code_views":1101,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":1,"media":[{"id":4494,"model_type":"App\\Component","model_id":2127,"collection_name":"preview","name":"temp22227","file_name":"temp22227.png","mime_type":"image\/png","disk":"public","size":62758,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp22227___media_library_original_1280_957.png","temp22227___media_library_original_1070_799.png","temp22227___media_library_original_895_669.png","temp22227___media_library_original_749_559.png","temp22227___media_library_original_627_468.png","temp22227___media_library_original_524_391.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FGd0FmQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvUS9XdEt0dFQ4dGJnNEFiSXJxcmFvNTZPNTBXblJKYTI4Y2NaK1VEQXJpUFJzYWE1S1ZTTUpXTWE3LzF6VjZGUDRUaG51VTVyY1RFYmhuRlZLS2x1VEdUanNXSTVHalVBZHF5OWtqWDIwaWNYMG9HTTFTcG9qMmpJSGN1MlQxclJLeERkeGFZZ29BS0FDZ0QvOWs9Ij4KCTwvaW1hZ2U+Cjwvc3ZnPg=="}},"order_column":4407,"created_at":"2021-08-12T22:43:59.000000Z","updated_at":"2021-08-12T22:44:00.000000Z","conversions_disk":"public","uuid":"8ac3c925-b993-43ea-88c2-2f0a30e30063","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/4494\/temp22227.png","preview_url":""}],"author":{"id":4343,"name":"Paulson Ps","slug":"paulson-ps","bio":null,"avatar":"\/storage\/avatars\/pluQLgEMm1HEpfX2wqPYInDfREa0xpBsTK9x74AF.jpg","header":null,"created_at":"2021-07-23T13:50:40.000000Z","updated_at":"2021-08-12T22:32:54.000000Z"},"tags":[{"id":7,"name":{"en":"Pages"},"description":"Looking to get the work done faster? Choose from our collection of 500+ fully coded page examples that are built using the popular CSS framework - Tailwind CSS. Get started or get inspired!","meta_description":"Choose from our collection of 500+ fully coded page examples that are built using the popular CSS framework - Tailwind CSS","slug":{"en":"pages"},"type":null,"order_column":10,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:13:03.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":2127,"tag_id":7}},{"id":5,"name":{"en":"Widget"},"description":"Check out our collection of 500+ widget examples. Use our snippets to preview the code and spend less time re-inventing the wheel.","meta_description":"Check out our collection of 500+ widget examples. Use our snippets to preview the code and spend less time re-inventing the wheel.","slug":{"en":"widget"},"type":null,"order_column":14,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:16:36.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":2127,"tag_id":5}},{"id":80,"name":{"en":"Music Player"},"description":"Elevate Your UI with Tailwind CSS Music Player Components","meta_description":"Explore our Tailwind CSS Music Player category, featuring beautifully crafted components to enhance your web applications. Easily integrate stylish and responsive music players using Tailwind CSS.","slug":{"en":"music-player"},"type":null,"order_column":69,"created_at":"2023-11-09T11:42:17.000000Z","updated_at":"2023-11-09T11:42:17.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":2127,"tag_id":80}}],"fork":null,"favorites":[{"id":4124,"name":"Lino93","slug":"lino93","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/83257872?v=4","header":null,"created_at":"2021-07-05T01:53:30.000000Z","updated_at":"2021-07-05T01:53:30.000000Z","pivot":{"component_id":2127,"user_id":4124}},{"id":4684,"name":"mariya","slug":"mariya","bio":null,"avatar":"\/storage\/avatars\/T45SHJefewVoWFasyrBJlmGxNknV2olVLRr5bJKV.jpg","header":null,"created_at":"2021-08-19T14:28:06.000000Z","updated_at":"2021-08-19T16:30:18.000000Z","pivot":{"component_id":2127,"user_id":4684}},{"id":4781,"name":"zero-sigma","slug":"zero-sigma","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/17350770?v=4","header":null,"created_at":"2021-08-28T23:00:01.000000Z","updated_at":"2021-08-28T23:00:01.000000Z","pivot":{"component_id":2127,"user_id":4781}},{"id":4898,"name":"brunohafonso95","slug":"brunohafonso95","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/43271781?v=4","header":null,"created_at":"2021-09-07T03:42:51.000000Z","updated_at":"2021-09-07T03:42:51.000000Z","pivot":{"component_id":2127,"user_id":4898}},{"id":4257,"name":"nkendrick101","slug":"nkendrick101","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/40567184?v=4","header":null,"created_at":"2021-07-15T17:31:18.000000Z","updated_at":"2021-07-15T17:31:18.000000Z","pivot":{"component_id":2127,"user_id":4257}},{"id":4417,"name":"feishu","slug":"feishu","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/950717?v=4","header":null,"created_at":"2021-07-29T06:59:36.000000Z","updated_at":"2021-07-29T06:59:36.000000Z","pivot":{"component_id":2127,"user_id":4417}},{"id":6639,"name":"4n70w4","slug":"4n70w4","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/38257723?v=4","header":null,"created_at":"2022-01-24T09:30:58.000000Z","updated_at":"2022-01-24T09:30:58.000000Z","pivot":{"component_id":2127,"user_id":6639}},{"id":1434,"name":"Matt","slug":"matt","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/2098eb6a3d48b22ed0692849699c795a","header":null,"created_at":"2020-10-27T13:11:58.000000Z","updated_at":"2020-10-27T13:11:58.000000Z","pivot":{"component_id":2127,"user_id":1434}},{"id":8006,"name":"Arstman","slug":"arstman-1","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/14262700?v=4","header":null,"created_at":"2022-05-30T23:43:08.000000Z","updated_at":"2022-05-30T23:43:08.000000Z","pivot":{"component_id":2127,"user_id":8006}},{"id":4343,"name":"Paulson Ps","slug":"paulson-ps","bio":null,"avatar":"\/storage\/avatars\/pluQLgEMm1HEpfX2wqPYInDfREa0xpBsTK9x74AF.jpg","header":null,"created_at":"2021-07-23T13:50:40.000000Z","updated_at":"2021-08-12T22:32:54.000000Z","pivot":{"component_id":2127,"user_id":4343}},{"id":1863,"name":"EgoistDeveloper","slug":"egoistdeveloper","bio":"Converting HTML tailwind templates to SASS use this tool \ud83d\udc49 https:\/\/egoistdeveloper.github.io\/twcss-to-sass-playground \ud83c\udf89 see my all components at here https:\/\/github.com\/EgoistDeveloper\/my-tailwind-components","avatar":"https:\/\/avatars0.githubusercontent.com\/u\/17010054?v=4","header":null,"created_at":"2020-12-30T23:41:30.000000Z","updated_at":"2022-09-05T21:16:39.000000Z","pivot":{"component_id":2127,"user_id":1863}},{"id":6574,"name":"fachrularly","slug":"fachrularly","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/24983698?v=4","header":null,"created_at":"2022-01-19T13:34:22.000000Z","updated_at":"2022-01-19T13:34:22.000000Z","pivot":{"component_id":2127,"user_id":6574}},{"id":6569,"name":"Glicht","slug":"glicht","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/96473dc05f9454fd44314396260fb37a","header":"\/storage\/headers\/2mQDvwOW5yMRC1ZjcsCwpzaj7NjklBMIpogbRbpA.jpg","created_at":"2022-01-18T19:50:36.000000Z","updated_at":"2022-11-25T18:03:40.000000Z","pivot":{"component_id":2127,"user_id":6569}},{"id":2786,"name":"chistel","slug":"chistel","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/46791424?v=4","header":null,"created_at":"2021-03-24T06:47:42.000000Z","updated_at":"2021-03-24T06:47:42.000000Z","pivot":{"component_id":2127,"user_id":2786}},{"id":13886,"name":"allanokothdev","slug":"allanokothdev","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/19547628?v=4","header":null,"created_at":"2023-08-30T10:34:02.000000Z","updated_at":"2023-08-30T10:34:02.000000Z","pivot":{"component_id":2127,"user_id":13886}},{"id":3558,"name":"whoisthisstud","slug":"whoisthisstud","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/44807533?v=4","header":null,"created_at":"2021-05-25T15:23:04.000000Z","updated_at":"2021-05-25T15:23:04.000000Z","pivot":{"component_id":2127,"user_id":3558}},{"id":19872,"name":"Igor097","slug":"igor097","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/26531334?v=4","header":null,"created_at":"2024-07-19T11:28:44.000000Z","updated_at":"2024-07-19T11:28:44.000000Z","pivot":{"component_id":2127,"user_id":19872}}]}" :edit="false"> Full screen Preview

Paulson Ps

3 components

Community Rate

Related components

See more components