<div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs" style="background-position: 50%;">
        <img src="https://mdbootstrap.com/img/Photos/Others/mewa.jpg" class="max-w-xs" />
        <div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed bg-black opacity-50"></div>

      Javascript language logo
      your recipe card header background

      Tailwind Components

      This opens a overflow-hidden container which is 50% of the width of the parent and the height is set to the same as the parent, so it will fill the space. The max-w-xs class sets the width to 100% and the max-w-xxx class sets the height to the value x. There is also a fixed class, which sets the position to absolute. The opacity-50 class sets the opacity to 50%.


        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.