css - How can i set a linear to text on the background svg in React+Tailwind? - Stack Overflow

admin管理员组

文章数量:1345409

I have code in React + TailwindCSS with the CSS for SVG-background look like this:

function App() {
  // Only for Test: State to manage the 'active' status, initially false
  const [isActive, setIsActive] = React.useState(false);

  return (
    <div>
      {/* Only for Test: Checkbox to toggle the active state */}
      <label className="flex items-center gap-2 text-white cursor-pointer">
        <input
          type="checkbox"
          checked={isActive}
          onChange={() => setIsActive(!isActive)} // Toggle isActive state on checkbox change
          className="w-4 h-4"
        />
        Toggle Active
      </label>
      
      <div className="flex flex-col items-center gap-4 p-6">
        {/* Original Element: with dynamic classes based on isActive state */}
        <a
          href="#"
          className={
            isActive
              ? "w-[150px] h-[60px] relative flex flex-row items-center justify-center pt-[17px] pb-[17px] px-[28px] box-border gap-2.5 text-left text-[18px] leading-[30px] font-semibold rounded-t-[10px] text-[#0A98E7] z-10 whitespace-nowrap active-link"
              : "w-[150px] h-[60px] relative flex flex-row items-center justify-center pt-[17px] pb-[17px] px-[28px] box-border gap-2.5 text-left text-[18px] leading-[30px] text-white font-semibold transition-all whitespace-nowrap"
          }
        >
          Manager
        </a>
      </div>
    </div>
  );
}

// Render React app
ReactDOM.createRoot(document.getElementById("root")).render(<App />);

.active-link:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 138%;
  height: 99%;
  background: url("../../Assets/Bg.svg") no-repeat center;
  background-size: contain;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-bottom: none;
}

<script src=".3.1/umd/react.production.min.js"></script>
<script src=".3.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

本文标签： cssHow can i set a linear to text on the background svg in ReactTailwindStack Overflow