<div class="flex flex-wrap justify-center space-x-2">
        <span
          class="px-4 py-2 rounded-full text-gray-500 bg-gray-200 font-semibold text-sm flex align-center w-max cursor-pointer active:bg-gray-300 transition duration-300 ease">
          Text
        </span>
      
        <span
          class="px-4 py-2 rounded-full text-gray-500 bg-gray-200 font-semibold text-sm flex align-center w-max cursor-pointer active:bg-gray-300 transition duration-300 ease">
          Text
          <button class="bg-transparent hover focus:outline-none">
            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times"
              class="w-3 ml-3" role="img" xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 352 512">
              <path fill="currentColor"
                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z">
              </path>
            </svg>
          </button>
        </span>
      </div>

      Javascript language logo
      your recipe card header background
      Chips

      Tailwind Components

      In the code above, the span with the class "px-4 py-2 rounded-full text-gray-500 bg-gray-200 font-semibold text-sm flex align-center w-max cursor-pointer active:bg-gray-300 transition duration-300 ease" has an onclick event that calls the following function:

      $("button").hover(function(){$(this).attr("data-prefix", "fas");$(this).attr("data-icon", "times");},function(){$(this).attr("data-prefix", "fas");$(this).attr("data-icon", "circles");});
      
       This function sets the "data-prefix" and "data-icon" attributes on the span to "fas" and "circles", respectively. When the user clicks the "button", the "hover" event is called, which then calls the "transition" function. This function sets the "transition" attribute on the span to "duration-300 ease". Finally, the "ease" attribute on the transition is set to "ease", which creates a gradual change
      

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.