Tailwind Css Audio Player

"="" alt="\"Album" pic\">\r\n\t\t\t\t<\="" div>\r\n\t\t\t\t<div="" p-8\">\r\n\t\t\t\t\t<div="" justify-between\">\r\n\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t<h3="" text-grey-darkest="" font-medium\">a="" sky="" full="" of="" stars<\="" h3>\r\n\t\t\t\t\t\t\t<p="" text-grey="" mt-1\">ghost="" stories<\="" p>\r\n\t\t\t\t\t\t<\="" div>\r\n\t\t\t\t\t\t<div="" h-6\"="" fill="\"currentColor\"" xmlns="\"http:\/\/www.w3.org\/2000\/svg\"" viewbox="\"0" 0="" 20="" 20\"><path="" d="\"M10" 3.22l-.61-.6a5.5="" 5.5="" 0-7.78="" 7.77l10="" 18.78l8.39-8.4a5.5="" 0-7.78-7.77l-.61.61z\"\="" ><\="" svg>\r\n\t\t\t\t\t\t<\="" div>\r\n\t\t\t\t\t<\="" div>\r\n\t\t\t\t\t<div="" justify-between="" items-center="" mt-8\">\r\n\t\t\t\t\t\t<div="" h-8\"="" 12.83l4.4="" 15c-.58.58-1.59="" 1-2.4="" 1h0v-2h2c.29="" .8-.2="" 1-.41l2.17-2.18="" 1.42="" 1.42zm16="" 4v1l4="" 4-4="" 4v6h-2c-.29="" 0-.8.2-1="" .41l-2.17="" 2.18l9.4="" 7.17="" 11.6="" 5c.58-.58="" 1.59-1="" 2.41-1h2zm0="" 10v-3l4="" 4v-3h-2c-.82="" 0-1.83-.42-2.41-1l-8.6-8.59c2.8="" 6.21="" 2.3="" 6="" 2="" 6h0v4h2c.82="" 1.83.42="" 2.41="" 1l8.6="" 8.59c.2.2.7.41.99.41h2z\"\="" 5h3v10h4v5zm12="" 0v10l-9-5="" 9-5z\"\="" p-8="" rounded-full="" bg-red-light="" shadow-lg\">\r\n\t\t\t\t\t\t\t<svg="" 4h3v12h5v4zm7="" 0h3v12h-3v4z\"\="" 5h3v10h-3v5zm4="" 5l9="" 5-9="" 5v5z\"\="" 4a2="" 0-2="" 2v6h0l4="" 4="" 4-4h5v6h7l2-2h5zm10="" 4h-3l4-4="" 4h-3v6a2="" 1-2="" 2h6l2-2h7v8z\"\="" div>\r\n\t\t\t\t<\="" div>\r\n\t\t\t<\="" div>\r\n\t\t\t<div="" py-4\">\r\n\t\t\t\t<div="" text-sm="" text-grey-darker\">\r\n\t\t\t\t\t<p>0:40<\="" p>\r\n\t\t\t\t\t<p>4:20<\="" p>\r\n\t\t\t\t<\="" bg-grey-dark="" rounded-full\">\r\n\t\t\t\t\t\t<div="" h-1="" relative\">\r\n\t\t\t\t\t\t\t<span="" h-4="" bg-red="" absolute="" pin-r="" pin-b="" -mb-1="" shadow\"><\="" span>\r\n\t\t\t\t\t\t<\="" div>\r\n\t\t<\="" div>\r\n\t<\="" div>\r\n<\="" div>","author_type":"app\\twitteruser","author_id":21,"collection_id":null,"fork_id":null,"votes":23,"score":"4.8","visits":29615,"popularity":3883,"slug":"tailwind-css-audio-player","approved":1,"created_at":"2018-07-29t00:00:00.000000z","updated_at":"2024-09-19t03:40:27.000000z","downloads":694,"code_views":7856,"center":false,"notified":1,"premium":0,"tailwind_config":null,"type":"component","css":"https:\="" \="" cdn.tailwindcss.com","should_tweet":0,"media":[{"id":817,"model_type":"app\\component","model_id":68,"collection_name":"preview","name":"temp24784","file_name":"temp24784.png","mime_type":"image\="" png","disk":"public","size":139736,"manipulations":[],"custom_properties":{"generated_conversions":{"thumb":true,"ogimage":true}},"responsive_images":{"medialibrary_original":{"urls":["temp24784___medialibrary_original_1280_957.png","temp24784___medialibrary_original_1070_799.png","temp24784___medialibrary_original_896_669.png","temp24784___medialibrary_original_749_559.png","temp24784___medialibrary_original_627_468.png","temp24784___medialibrary_original_524_391.png","temp24784___medialibrary_original_439_328.png","temp24784___medialibrary_original_367_274.png"],"base64svg":"data:image\="" svg+xml;base64,pcfet0nuwvbfihn2zybqvujmsumgii0vl1czqy8vrfreifnwryaxljevl0voiiaiahr0cdovl3d3dy53my5vcmcvr3jhcghpy3mvu1zhlzeums9eveqvc3znmteuzhrkij4kphn2zyb2zxjzaw9upsixljeiihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyigeg1sbnm6egxpbms9imh0dha6ly93d3cudzmub3jnlze5otkvegxpbmsiihhtbdpzcgfjzt0ichjlc2vydmuiihg9ijaicib5psiwiib2awv3qm94psiwidagmti4mca5ntcipgojpgltywdlihdpzhropsixmjgwiibozwlnahq9ijk1nyigegxpbms6ahjlzj0izgf0ytppbwfnzs9qcgvno2jhc2u2ncwvowovnefbuvnrwkpsz0fcqvffqvlbqmdbquqvl2dbn1exskzrvljqvwpvz1oyuxrhbkjswnlcmk1tnhdjq2gxyzjsdvp5qkpta2nnu2xcrlj5qjjprefwtencegrxrnnhwfi1suqwz09uqusvoxnbuxdbrefnsurbz0leqxdnrejbturcqvvjqlfvrujbvutcd2nhq0f3s0rbd0xdz3nmrfe0u0vbme9futrmq3hbv0vcrvrgqlvwrlf3uez4z1dgqmdtrkjvvs85c0frd0veqkfrrkjbvupcuvvkrkewtersuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvrkjrvuzcuvvgqlfvlzhbquvrz0fgd0fmqxdfukfbsvjbuu1sqwyvrufcoefbquvgqvffqkfrrujbqufbqufbqufbqujbz01fqlfzsenba0tdly9fquxvuufbsujbd01dqkfnrkjruuvbqufczlffq0f3quvfuvvtsvrgqkjotljzuwnpy1jrewdar2hdq05dc2nfvlv0shdkre5py29jsknowvhhqmthslnzbktda3forfuytnpnnu9rtkvsvvpiu0vss1uxulzwbgrzv1zwalphvm1ammhwyw5omgrywjnlsgw2zzrtrmhvzulpwxftazvtvmxwzvltwnfpbzztbhbxzw9xyxf5czdtmxryztr1ynjddzhurnhzzkl5y3jtmdluvjf0zlkyzhjonhvqazvlym42t25xogzmejlqwdi5l2o1k3yvrufcoejbqu1cqvffqkfrrujbuuvbqufbqufbqujbz01fqlfzsenba0tdly9fquxvukfbsujbz1ffqxdrsejruuvbquvdzhdbqkfntvjcqvvotvfzu1fwruhzwevuswplqkncuknryud4d1frak0xthdgv0p5mffvv0pevghkzkvyr0jryuppy29lu28xtmpjne9ucersrvzhujboslnstlvwvlpyv0zsyvkyumxabwrvyvdwemrivjjkm2g1zw9lrghjv0donglkaxblvgxkv1dsnwlabxflanblv21wnmlwcxjlenrmvzj0n2k1dxnmrhhnwed4ogpkexrmvdfowfcxowpamnvmajvpwg01k2pwnnzmejlqwdi5l2o1k3yvyufbd0rbuufdrvfnukfeoeevumk1uzn0sxk4cenjt3boy3lozlk5cdfathfac2zprfjwwkjhbdnfems0d0dgwddgowlqyitacnbhulnjr1vaqjzwbnlvcjjyn2kvww8vu2psulh0skhpzkvqu3j2vi9ebhpimlrgwm1vz0vwdlnrb3l1em5tcm8rys9dm3dkoflxdmlxszr1ynfyevzrm0vgajb6wg96eethc2pcvtrxmtnqcwzsagqycglqa09zmvfbaze1ymjjam90rdjlbtvzqtvhcehfumszzgvhqmpcynfqnfirvkfhrhzloxfbmehldutbuc9aij4kctwvaw1hz2u+cjwvc3znpg="="}},"order_column":810,"created_at":"2019-11-19T08:03:38.000000Z","updated_at":"2020-09-25T21:39:17.000000Z","conversions_disk":"public","uuid":"2239aa02-5eb3-4187-904d-3dd22e968b0a","generated_conversions":null,"original_url":"https:\/\/tailwindcomponents.com\/storage\/817\/temp24784.png","preview_url":""}],"author":{"id":21,"name":"shuvro_008","created_at":"2019-07-04T08:20:14.000000Z","updated_at":"2019-07-04T08:20:14.000000Z"},"tags":[{"id":4,"name":{"en":"Cards"},"description":"Check" out="" our="" examples="" beautifully="" designed="" cards="" that="" will="" help="" you="" display="" your="" content="" easily.="" use="" snippets="" to="" preview="" the="" code="" and="" spend="" less="" time="" re-inventing="" wheel.","meta_description":"check="" easily.","slug":{"en":"cards"},"type":null,"order_column":3,"created_at":"2019-07-04t08:20:17.000000z","updated_at":"2022-08-01t16:06:24.000000z","pivot":{"taggable_type":"app\\component","taggable_id":68,"tag_id":4}},{"id":5,"name":{"en":"widget"},"description":"check="" collection="" 500+="" widget="" examples.="" 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":68,"tag_id":5}},{"id":80,"name":{"en":"music="" player"},"description":"elevate="" ui="" with="" tailwind="" music="" player="" components","meta_description":"explore="" category,="" featuring="" crafted="" components="" enhance="" web="" applications.="" easily="" integrate="" stylish="" responsive="" players="" using="" 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":68,"tag_id":80}}],"fork":null,"favorites":[{"id":4012,"name":"vinideep","slug":"vinideep","bio":null,"avatar":"https:\="" avatars.githubusercontent.com\="" u\="" 72923095?v="4","header":null,"created_at":"2021-06-25T10:41:54.000000Z","updated_at":"2021-06-25T10:41:54.000000Z","pivot":{"component_id":68,"user_id":4012}},{"id":4101,"name":"exer3","slug":"exer3","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/65127330?v=4","header":null,"created_at":"2021-07-02T11:02:15.000000Z","updated_at":"2021-07-02T11:02:15.000000Z","pivot":{"component_id":68,"user_id":4101}},{"id":4237,"name":"erkobridee","slug":"erkobridee","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/342471?v=4","header":null,"created_at":"2021-07-14T06:40:38.000000Z","updated_at":"2021-07-14T06:40:38.000000Z","pivot":{"component_id":68,"user_id":4237}},{"id":4532,"name":"m3bada","slug":"m3bada","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/35747647?v=4","header":null,"created_at":"2021-08-07T11:53:50.000000Z","updated_at":"2021-08-07T11:53:50.000000Z","pivot":{"component_id":68,"user_id":4532}},{"id":5149,"name":"Julian" crosson-hill","slug":"julian-crosson-hill","bio":null,"avatar":"\="" storage\="" avatars\="" d1cnsqbznnpgbicd2varafilmgghkfjixauxzm2q.png","header":null,"created_at":"2021-09-22t18:15:04.000000z","updated_at":"2021-11-24t20:09:04.000000z","pivot":{"component_id":68,"user_id":5149}},{"id":5317,"name":"javierp1647","slug":"javierp1647","bio":null,"avatar":"https:\="" 42478760?v="4","header":null,"created_at":"2021-10-06T15:04:54.000000Z","updated_at":"2021-10-06T15:04:54.000000Z","pivot":{"component_id":68,"user_id":5317}},{"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":68,"user_id":6639}},{"id":6695,"name":"Arijul" islam","slug":"arijul-islam","bio":null,"avatar":"https:\="" www.gravatar.com\="" avatar\="" da91634e524611ff5f75e818755e9b92","header":null,"created_at":"2022-01-27t19:24:22.000000z","updated_at":"2022-01-27t19:24:22.000000z","pivot":{"component_id":68,"user_id":6695}},{"id":6727,"name":"nonacc","slug":"nonacc","bio":null,"avatar":"https:\="" 12987330?v="4","header":null,"created_at":"2022-01-30T22:26:40.000000Z","updated_at":"2022-01-30T22:26:40.000000Z","pivot":{"component_id":68,"user_id":6727}},{"id":6729,"name":"EL-MOURABITsaber","slug":"el-mourabitsaber","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/85076651?v=4","header":null,"created_at":"2022-01-31T00:44:41.000000Z","updated_at":"2022-01-31T00:44:41.000000Z","pivot":{"component_id":68,"user_id":6729}},{"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":68,"user_id":6569}},{"id":5683,"name":"meringuekhalil","slug":"meringuekhalil","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/944567032695095296\/gU55PnS5_normal.jpg","header":null,"created_at":"2021-11-04T14:04:08.000000Z","updated_at":"2021-11-04T14:04:08.000000Z","pivot":{"component_id":68,"user_id":5683}},{"id":10628,"name":"BenSchlottau","slug":"benschlottau","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/7984988?v=4","header":null,"created_at":"2023-01-21T17:40:59.000000Z","updated_at":"2023-01-21T17:40:59.000000Z","pivot":{"component_id":68,"user_id":10628}},{"id":10288,"name":"hotpot","slug":"hotpot","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/bad3b158f81fb726752532e6ed9a0a9b","header":null,"created_at":"2022-12-28T04:16:04.000000Z","updated_at":"2022-12-28T04:16:04.000000Z","pivot":{"component_id":68,"user_id":10288}},{"id":12120,"name":"tiagofrancafernandes","slug":"tiagofrancafernandes","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/8310974?v=4","header":null,"created_at":"2023-04-28T16:12:23.000000Z","updated_at":"2023-04-28T16:12:23.000000Z","pivot":{"component_id":68,"user_id":12120}},{"id":8280,"name":"NdekoCode","slug":"ndekocode","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/85836702?v=4","header":"\/storage\/headers\/3FqzEebO3eZi51EIVGBz9z4Z9OfkfxfX63Dtgga5.png","created_at":"2022-06-28T15:31:22.000000Z","updated_at":"2023-09-08T17:49:11.000000Z","pivot":{"component_id":68,"user_id":8280}},{"id":16029,"name":"xuyin666","slug":"xuyin666","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/37757643?v=4","header":null,"created_at":"2023-12-25T08:39:19.000000Z","updated_at":"2023-12-25T08:39:19.000000Z","pivot":{"component_id":68,"user_id":16029}}]}"" :edit="false"> Full screen Preview

Download