'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.
Solution 1:[1]
**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;
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 |