I need to do this in tailwind CSS for my react application. How can I do that? HTML CSS This is the same thing in the above code pen link. Answer

React App adding Pure CSS to Tailwind CSS

I need to do this in tailwind CSS for my react application.

How can I do that?

HTML

<h1>Show / Hide Animation with pure CSS</h1>

<label class="trigger">
  <input type="checkbox" class="checkbox checkbox--red" /> Show additional information
  <span class="msg">
    Hey there, I'm fading in/out with pure CSS. How cool is that?!
  </span>
</label>

CSS

/**
 * Notice: Checkbox is styled via import of my other pen (https://codepen.io/fxm90/pen/JdmaeL)
 */

.trigger {
  input[type="checkbox"] {
    
    // Hide content via default
    & + span {
      visibility: hidden;
      opacity: 0;
    
      transition: visibility 0s linear 0.33s, opacity 0.33s linear;
    }
    
    // Show if checkbox is clicked
    &:checked + span {
      visibility: visible;
      opacity: 1;
      
      transition-delay: 0s;
    }
  }
}

// Simple styling for message.
.msg {
  display: block;
  margin-top: 8px;
  padding: 8px 12px;
  
  border: 1px solid #ddd;
  border-radius: 3px;
}

This is the same thing in the above code pen link.

Answer

**Edit as you need. I gave the basic example here. If you not find your solution, let me a reply**
import React, { useState } from "react";

const YourComponent = () => {
  const [checked, setChecked] = useState(false);
  const selectStyle = (e) => {
    const checked = e.target.checked;
    if (checked) {
      setChecked(true);
    } else {
      setChecked(false);
    }
  };`enter code here`
  return (
    <>
      <div className="px-20 my-10">
        <h1>Show / Hide Animation with pure CSS</h1>

        <label class="trigger">
          <input
            type="checkbox"
            class="checkbox checkbox--red"
            onClick={(e) => {
              selectStyle(e);
            }}
          />{" "}
          Show additional information
          <div
            className={
              checked
                ? "opacity-100 transition-opacity duration-1000 ease-out"
                : "opacity-0 transition-opacity duration-1000 ease-out"
            }
          >
            <span class="block mt-2 py-2 px-3 border border[#ddd] rounded ">
              Hey there, I'm fading in/out with pure CSS. How cool is that?!
            </span>
          </div>
        </label>
      </div>
    </>
  );
};

export default YourComponent;

Advertisement

Answer