- Published on
How To Build A Music Card (OSU! Lazer) With Tailwind CSS In 5 Easy Steps

- What is Tailwind CSS?
- The description of music card (OSU! Lazer) ui component
- Why use Tailwind CSS to create a music card (OSU! Lazer) ui component?
- The preview of music card (OSU! Lazer) ui component
- The source code of music card (OSU! Lazer) ui component
- How to create a music card (OSU! Lazer) with Tailwind CSS?
- Install tailwind css of verion 3.0.18
- All the unility class needed to create a music card (OSU! Lazer) component
- 46 steps to create a music card (OSU! Lazer) component with Tailwind CSS
- Conclusion
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.
The description of music card (OSU! Lazer) ui component
Music card from osu! lazer
Why use Tailwind CSS to create a music card (OSU! Lazer) ui component?
- It can make the building process of music card (OSU! Lazer) ui component faster and more easily.
- Enables building complex responsive layouts and components freely.
- Minimum lines of CSS code in music card (OSU! Lazer) component file.
The preview of music card (OSU! Lazer) ui component
Free download of the music card (OSU! Lazer)'s source code
The source code of music card (OSU! Lazer) ui component
<main class="flex min-h-screen w-full items-center justify-center">
<!-- new card -->
<article
class="group relative flex h-[12rem] w-[50rem] overflow-hidden rounded-2xl bg-[#3a4448]"
>
<!-- buttons right side -->
<aside
class="absolute right-0 flex h-full flex-col justify-center space-y-8 p-3"
>
<!-- like icon -->
<svg
class="invisible h-7 w-7 text-stone-200 opacity-0 transition-all duration-200 hover:scale-[120%] hover:text-white group-hover:visible group-hover:opacity-100"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
></path>
</svg>
<!-- download icon -->
<svg
class="invisible h-7 w-7 text-stone-200 opacity-0 transition-all duration-200 hover:scale-[120%] hover:text-white group-hover:visible group-hover:opacity-100"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
></path>
</svg>
</aside>
<!-- image (left side) -->
<div class="absolute inset-y-0 left-0 w-48">
<img
src="https://unsplash.it/id/1/640/425"
alt=""
class="h-full w-full object-cover object-center opacity-95"
/>
<div
class="invisible absolute inset-0 flex h-full w-full items-center justify-center bg-[#0c0c0c]/70 opacity-0 transition-all duration-200 group-hover:visible group-hover:opacity-100"
>
<svg
class="h-w-14 w-14 cursor-pointer text-white transition-all duration-200 hover:text-yellow-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
clip-rule="evenodd"
></path>
</svg>
</div>
</div>
<!-- right side -->
<div
class="absolute inset-y-0 left-44 w-[39rem] overflow-hidden rounded-2xl transition-all duration-200 group-hover:w-[36rem]"
>
<!-- background image -->
<div
style="background-image: url('https://unsplash.it/id/1/640/425')"
class="h-full w-full bg-cover bg-center"
>
<div
class="h-full w-full bg-[#455055]/80 transition-all duration-200 group-hover:bg-[#31383b]/80"
></div>
</div>
<!-- content -->
<section
class="absolute inset-0 flex flex-col justify-between p-4 text-white"
>
<header class="space-y-1">
<div class="text-3xl font-medium">Smokin Out The Window</div>
<div class="font-medium">
by Bruno Mars, Anderson .Paak, Silk Sonic
</div>
<div class="text-sm">
mapped by
<a
href="#"
class="text-[#96bacc] transition-all hover:text-yellow-400"
>Ryafuka</a
>
</div>
</header>
<div
class="invisible flex space-x-3 opacity-0 transition-all duration-200 group-hover:visible group-hover:opacity-100"
>
<span class="flex items-center space-x-1">
<!-- liked icon -->
<svg
class="h-5 w-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
></path>
</svg>
<div>33</div>
</span>
<!-- played icon -->
<span class="flex items-center space-x-1">
<svg
class="h-5 w-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<div>75.7k</div>
</span>
<!-- verified icon -->
<span class="flex items-center space-x-1">
<svg
class="h-5 w-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<div>25 Mar 2022</div>
</span>
</div>
<div class="flex space-x-2">
<span
class="rounded-full bg-[#86ff5f] px-2 font-medium text-stone-900"
>RANKED</span
>
<div class="flex items-center space-x-1">
<span class="h-5 w-2 rounded-full bg-red-500"></span>
<span class="h-5 w-2 rounded-full bg-green-500"></span>
<span class="h-5 w-2 rounded-full bg-yellow-500"></span>
</div>
</div>
</section>
</div>
</article>
</main>
How to create a music card (OSU! Lazer) with Tailwind CSS?
Install tailwind css of verion 3.0.18
Use the script
html tag to import the script of Tailwind CSS of the version 3.0.18
<script src="https://cdn.tailwindcss.com"></script>
All the unility class needed to create a music card (OSU! Lazer) component
flex
min-h-screen
w-full
relative
h-[12rem]
w-[50rem]
overflow-hidden
bg-[#3a4448]
absolute
right-0
h-full
flex-col
p-3
invisible
h-7
w-7
text-stone-200
hover:text-white
group-hover:visible
left-0
w-48
bg-[#0c0c0c]/70
h-w-14
w-14
text-white
hover:text-yellow-400
left-44
w-[39rem]
group-hover:w-[36rem]
bg-cover
bg-center
bg-[#455055]/80
group-hover:bg-[#31383b]/80
p-4
text-3xl
text-sm
text-[#96bacc]
h-5
w-5
bg-[#86ff5f]
px-2
text-stone-900
w-2
bg-red-500
bg-green-500
bg-yellow-500
46 steps to create a music card (OSU! Lazer) component with Tailwind CSS
Use
flex
to create a block-level flex container.Set the minimum width/height of an element using the
min-h-screen
utilities.Use
w-full
to set an element to a 100% based width.Use
relative
to position an element according to the normal flow of the document.Use
h-[12rem]
to set an element to a fixed height([12rem]).Use
w-[50rem]
to set an element to a fixed width([50rem]).Use
overflow-hidden
to clip any content within an element that overflows the bounds of that element.Control the background color of an element to [#3a4448] using the
bg-[#3a4448]
utilities.Use
absolute
to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.Use the
right-0
utilities to set the right position of a positioned element to 0rem.Use
h-full
to set an element’s height to 100% of its parent, as long as the parent has a defined height.Use
flex
to create a block-level flex container.Control the padding on all sides of an element to 0.75rem using the
p-3
utilities.Use
invisible
to hide an element, but still maintain its place in the DOM, affecting the layout of other elements.Use
h-7
to set an element to a fixed height(1.75rem).Use
w-7
to set an element to a fixed width(1.75rem).Control the text color of an element to stone-200 using the
text-stone-200
utilities.Control the text color of an element to white on hover using the
hover:text-white
utilities.Use
visible
to make an element visible. This is mostly useful for undoing the invisible utility at different screen sizes.Use the
left-0
utilities to set the left position of a positioned element to 0rem.Use
w-48
to set an element to a fixed width(12rem).Control the background color of an element to [#0c0c0c]/70 using the
bg-[#0c0c0c]/70
utilities.Use
h-w-14
to set an element to a fixed height(w-14).Use
w-14
to set an element to a fixed width(3.5rem).Control the text color of an element to white using the
text-white
utilities.Control the text color of an element to yellow-400 on hover using the
hover:text-yellow-400
utilities.Use the
left-44
utilities to set the left position of a positioned element to 11rem.Use
w-[39rem]
to set an element to a fixed width([39rem]).Use
group-hover:w-[36rem]
to set an element to a fixed width([36rem])undefined.Control the background color of an element to cover using the
bg-cover
utilities.Control the background color of an element to center using the
bg-center
utilities.Control the background color of an element to [#455055]/80 using the
bg-[#455055]/80
utilities.Control the background color of an element to [#31383b]/80 using the
group-hover:bg-[#31383b]/80
utilitiesundefined.Control the padding on all sides of an element to 1rem using the
p-4
utilities.Control the text color of an element to 3xl using the
text-3xl
utilities.Control the text color of an element to sm using the
text-sm
utilities.Control the text color of an element to [#96bacc] using the
text-[#96bacc]
utilities.Use
h-5
to set an element to a fixed height(1.25rem).Use
w-5
to set an element to a fixed width(1.25rem).Control the background color of an element to [#86ff5f] using the
bg-[#86ff5f]
utilities.Control the horizontal padding of an element to 0.5rem using the
px-2
utilities.Control the text color of an element to stone-900 using the
text-stone-900
utilities.Use
w-2
to set an element to a fixed width(0.5rem).Control the background color of an element to red-500 using the
bg-red-500
utilities.Control the background color of an element to green-500 using the
bg-green-500
utilities.Control the background color of an element to yellow-500 using the
bg-yellow-500
utilities.
Conclusion
The above is a step-by-step tutorial on how to use Tailwind CSS to create a music card (OSU! Lazer) components, learn and follow along to implement your own components.