Stats preview card component using TailwindCSS

Community feedback

• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  For the image, I did something like this, I hope that helps:

              <div class="image-container">
                  <img class="main-image" src="images/image-header-mobile.jpg" alt="">
              </div>
  .image-container {
    display: inherit;
    position: relative;
    width: 100%;
    border-radius: 0 10px 10px 0;
    background-color: hsl(277, 64%, 61%);
  }
  .main-image {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    border-radius: 0 10px 10px 0;
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
  

  1

  ---

  

  wdbyb•150

  @wdbybPosted almost 2 years ago

  @catherineisonline Hi, Catherine!

  Thank you for your feedback! I like the way you've done it I did something similar but with Tailwind, here is the code:

  <div class="md:w-1/2 md:h-auto h-60 relative">
            <div class="absolute w-full h-full bg-softViolet opacity-75 z-10 mix-blend-multiply"></div>
            <picture>
              <source srcset="./image-header-mobile.webp" media="(max-width: 768px)" type="image/webp">
              <source srcset="./image-header-mobile.jpg" media="(max-width: 768px)" type="image/jpeg">
              <source srcset="./image-header-desktop.webp" type="image/webp">
              <img class="absolute w-full h-full object-cover object-top md:object-right lg:object-top" width="540"
                height="446" src="./image-header-desktop.jpg" alt="Team members">
            </picture>
  </div>
  

  So I have div with styles absolute w-full h-full bg-softViolet opacity-75 z-10 mix-blend-multiply that works as a tint, but what I think right now that probably I can just move all this styles to container previously added to them before:*

  It would look something like that:

  <div class="md:w-1/2 md:h-auto h-60 relative before:absolute before:w-full before:h-full before:bg-softViolet before:opacity-75 before:z-10 before:mix-blend-multiply">
    ...
  </div>
  

  Or I got your feedback wrong way?

  0