4ngel_._ Posts - Answer Overflow

4ngel_._

Explore posts from servers

•Created by 4ngel_._ on 12/24/2023 in #front-end

Tailwind Marquee Effect

Hello, this may be complex to explain but i'll try my best to do so. I have 4 grids (See image below) and each column can contain an image. My idea was to implement a Marquee effect on the Y axis, with the following conditions: 1) The Y axis must follow a what's-so-called "pattern": Y(1): Down, Y(2): Up, Y(3): Down, Y(4): Up 2) Images shouldn't be repetitive - I don't want the same images to appear somewhere. 4) One image at a time - For each Y, display one image at a time (I don't know if you get it) Note that the images must start and end on the container

3 replies

KPCKevin Powell - Community

•Created by 4ngel_._ on 12/24/2023 in #front-end

Broken Tailwind Responsiveness

So Tailwind responsiveness is broken. Here is the PC and Mobile version:

6 replies

KPCKevin Powell - Community

•Created by 4ngel_._ on 9/9/2023 in #front-end

TAILWIND How To Ignore Tags

So I have

<li class="relative hover:opacity-50">
  <button>Some button</button>

  <div class="dropdown-1"> </div>
</li>

<li class="relative hover:opacity-50">
  <button>Some button</button>

  <div class="dropdown-1"> </div>
</li>

How do I apply the hover-opacity:50 to the button tag only and not div class="dropdown-1"?

37 replies

KPCKevin Powell - Community

•Created by 4ngel_._ on 9/4/2023 in #front-end

TAILWIND Checkbox Not Aligning

<div className="flex items-center justify-center h-screen">
        <div className=" border-black rounded border-x-2 border-y-2 w-[20rem] h-[50px]">
        <input type="checkbox" className="mr-2"/>
        
        <div className="text-blue-800 flex justify-center items-center">
          I'm not a robot
        </div>

        </div>
      </div>
    </>

<div className="flex items-center justify-center h-screen">
        <div className=" border-black rounded border-x-2 border-y-2 w-[20rem] h-[50px]">
        <input type="checkbox" className="mr-2"/>
        
        <div className="text-blue-800 flex justify-center items-center">
          I'm not a robot
        </div>

        </div>
      </div>
    </>

The checkbox wont align with the text and the text wont stay in the center. https://playcode.io/1583581

6 replies

KPCKevin Powell - Community

•Created by 4ngel_._ on 9/2/2023 in #front-end

Stripe Arrow Animation

So stripe.com has a little arrow animation (along with the dropdown) when hovering on a button which is from the bottom to top. I want to do the same stuff, with Tailwind. For now I have the code for making it from left to center

@layer components {

  .dropdown-1 {
    @apply absolute flex top-1 -left-48 group-hover:opacity-100 group-hover:translate-y-5 transition group-hover:visible 
           duration-[350ms] ease-in-out invisible min-w-[550px] transform opacity-0 
  }

  .arrow {
    @apply absolute w-10 h-10 bg-white rotate-45 transition-transform transform translate-x-0 group-hover:translate-x-[12rem] top-0 z-0
           ease-in-out rounded-sm duration-[350ms]
  } 
}

@layer components {

  .dropdown-1 {
    @apply absolute flex top-1 -left-48 group-hover:opacity-100 group-hover:translate-y-5 transition group-hover:visible 
           duration-[350ms] ease-in-out invisible min-w-[550px] transform opacity-0 
  }

  .arrow {
    @apply absolute w-10 h-10 bg-white rotate-45 transition-transform transform translate-x-0 group-hover:translate-x-[12rem] top-0 z-0
           ease-in-out rounded-sm duration-[350ms]
  } 
}

I have no time for setting up some live code, please try fix to & let me know. This should be simple and straightforward nothing too much complicated

46 replies

KPCKevin Powell - Community

•Created by 4ngel_._ on 8/21/2023 in #front-end

(Stripe) Responsive Tailwind

Hello I would like to make the UI responsive like Stripe. When on mobile there is a menu which there are options to choose aswell as sub-options. Is it possible to re-create such thing in Tailwind?

29 replies

KPCKevin Powell - Community

•Created by 4ngel_._ on 8/5/2023 in #front-end

(React) (Tailwind CSS) Icons Not Displaying

The title should be clear, they do not display.

19 replies

CC#

•Created by 4ngel_._ on 3/26/2023 in #help

❔ ✅ Custom Fonts Not Working [ Visual Studio - WPF ]

Custom Fonts are not working. I wonder what causes the issue.

13 replies

Gaming

Programming