Published on

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

Tags
CardsWidget
music card (OSU! Lazer)

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

  1. Use flex to create a block-level flex container.

  2. Set the minimum width/height of an element using the min-h-screen utilities.

  3. Use w-full to set an element to a 100% based width.

  4. Use relative to position an element according to the normal flow of the document.

  5. Use h-[12rem] to set an element to a fixed height([12rem]).

  6. Use w-[50rem] to set an element to a fixed width([50rem]).

  7. Use overflow-hidden to clip any content within an element that overflows the bounds of that element.

  8. Control the background color of an element to [#3a4448] using the bg-[#3a4448] utilities.

  9. 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.

  10. Use the right-0 utilities to set the right position of a positioned element to 0rem.

  11. Use h-full to set an element’s height to 100% of its parent, as long as the parent has a defined height.

  12. Use flex to create a block-level flex container.

  13. Control the padding on all sides of an element to 0.75rem using the p-3 utilities.

  14. Use invisible to hide an element, but still maintain its place in the DOM, affecting the layout of other elements.

  15. Use h-7 to set an element to a fixed height(1.75rem).

  16. Use w-7 to set an element to a fixed width(1.75rem).

  17. Control the text color of an element to stone-200 using the text-stone-200 utilities.

  18. Control the text color of an element to white on hover using the hover:text-white utilities.

  19. Use visible to make an element visible. This is mostly useful for undoing the invisible utility at different screen sizes.

  20. Use the left-0 utilities to set the left position of a positioned element to 0rem.

  21. Use w-48 to set an element to a fixed width(12rem).

  22. Control the background color of an element to [#0c0c0c]/70 using the bg-[#0c0c0c]/70 utilities.

  23. Use h-w-14 to set an element to a fixed height(w-14).

  24. Use w-14 to set an element to a fixed width(3.5rem).

  25. Control the text color of an element to white using the text-white utilities.

  26. Control the text color of an element to yellow-400 on hover using the hover:text-yellow-400 utilities.

  27. Use the left-44 utilities to set the left position of a positioned element to 11rem.

  28. Use w-[39rem] to set an element to a fixed width([39rem]).

  29. Use group-hover:w-[36rem] to set an element to a fixed width([36rem])undefined.

  30. Control the background color of an element to cover using the bg-cover utilities.

  31. Control the background color of an element to center using the bg-center utilities.

  32. Control the background color of an element to [#455055]/80 using the bg-[#455055]/80 utilities.

  33. Control the background color of an element to [#31383b]/80 using the group-hover:bg-[#31383b]/80 utilitiesundefined.

  34. Control the padding on all sides of an element to 1rem using the p-4 utilities.

  35. Control the text color of an element to 3xl using the text-3xl utilities.

  36. Control the text color of an element to sm using the text-sm utilities.

  37. Control the text color of an element to [#96bacc] using the text-[#96bacc] utilities.

  38. Use h-5 to set an element to a fixed height(1.25rem).

  39. Use w-5 to set an element to a fixed width(1.25rem).

  40. Control the background color of an element to [#86ff5f] using the bg-[#86ff5f] utilities.

  41. Control the horizontal padding of an element to 0.5rem using the px-2 utilities.

  42. Control the text color of an element to stone-900 using the text-stone-900 utilities.

  43. Use w-2 to set an element to a fixed width(0.5rem).

  44. Control the background color of an element to red-500 using the bg-red-500 utilities.

  45. Control the background color of an element to green-500 using the bg-green-500 utilities.

  46. 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.