iam just learning about React JS and a Tailwind, so i want to make a Carousel for my website project using a React JS & TailwindCSS, I've already make the Carousel but its not done yet, i want to make the Carousel Slide Horizontally and if the Carousel reach the end i iwant to make it back to beginning. Here's my code
`
<div className="mx-10 py-5 overflow-x-hidden">
<div className={`flex flex-none min-w-screen bg-gray-900 space-x-10 transition-transform duration-300 -translate-x-[${index}rem]`}>
<div className={`wrapper flex-none w-[55%] h-48 bg-gradient-to-r from-green-300 to-cyan-400 rounded-3xl text-3xl`}>
</div>
<div className={`flex-none w-[55%] h-48 bg-gradient-to-r from-fuchsia-600 to-pink-500 rounded-3xl`}>
</div>
<div className={`flex-none w-[55%] h-48 bg-gradient-to-r from-red-400 to-orange-300 rounded-3xl`}>
</div>
</div>
</div>
`
Sorry for my english
I want to make my Carousel works, the Carousel that i make can slide from begin to end, and at the end it will back to beginning again.
Related
I am trying to apply a style to my links when they are focused. But it does not work. I am using tailwindcss (on a React js application).
Here is my code :
<Link to='/clients' className=''>
<div className="text-2sm font-semibold flex items-center mb-4 hover:bg-[#BE97C6] focus:bg-[#BE97C6] px-2 py-1 rounded-full transition ease-in-out ">
<IoPersonCircleSharp className="text-xl mx-1"/>
<p className="">Clients</p>
</div>
</Link>
Can you, please, help me to solve it ? Thanks you !
Your Link is getting focused and not the div.
Try to set group class on Link and then group-focus:bg-[#BE97C6] on the div.
Hi All,
I am looking for a responsive way using TailwindCSS to bind the outer card component to the viewport.
I've tried w-screen and h-screen, however they don't ensure that the card component remains in view across differing window sizes.
I want to get rid of the white space around the card.
Any suggestions are much appreciated.
Thanks,
Brandon
import BlogPost from './BlogPost';
const CardDisplay = () => {
return (
<div class="object-cover w-screen relative bg-white rounded-xl shadow-md overscroll-contain overflow-hidden ">
<div class="md:flex">
<div class="lg:shrink-0">
<img class="h-full w-full object-cover md:h-full md:w-64" src="/img/store.jpg" alt="Man looking at item at a store"></img>
</div>
<div class="p-32">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
<BlogPost/>
<BlogPost/>
<BlogPost/>
</div>
</div>
</div>
)
}
export default CardDisplay;
I am trying to position an image over image. Basically I want the image to fit correctly at the chest area position on the hoodie, but it's not coming out properly. How do I do it in a clean way that is responsive as well?
My code:
<div className="basis-1/2">
<div className="max-w-lg container mx-auto">
<img className="w-full" src={`${router.basePath}/assets/images/Hoodie black label.jpg`} alt="Empty Hoodie"/>
<div className="place-items-center">
<img className="w-1/6 absolute top-1/3 right 1/4 place-items-center h-40 w-40" src={urlvalue} alt="Picked NFT to Print"/>
</div>
</div>
</div>
Thanks in advance!
You can overlay an image over another like this,
<script src="https://cdn.tailwindcss.com"></script>
<div class="relative mix-blend-lighten">
<img src="https://m.media-amazon.com/images/I/61ktWbf0z4L._UX679_.jpg" alt="BannerImage" class="absolute h-[] w-full object-cover object-right " />
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back04.jpg" alt="BannerImage" class="absolute h-[20vh] w-[30vh] object-cover object-right mx-44 mt-44 sm:mx-72 sm:mt-72" />
</div>
But since both the image had absolute position, then you have to add different margins for the upper image for each screen breakpoints, so that it lies always on chest area of hoodie image.
hello i am facing a issue with react tailwind text area , i am tring to apply mt-5 but it is not working. When i added using style={{marginTop:"1.25rem"}} it is working , similarly properties like height margin ... are not applying to text area in react
function (){
return (
<div className=" w-24 m-5">
<input placeholder="name" className="pl-2 rounded-sm" />
<textarea className=" mt-5"></textarea>
<button className="mt-5 bg-gray-300 text-gray-800 px-2 py-1 hover:bg-black hover:text- white rounded-sm hover:underline">
submit
</button>
</div>
);
}
i actually find a problem that the react is adding a additional style to the textarea and that is overwriting the textarea, i find this is inspector, in textarea there is a additional style
how can i avoid this aditional style and who is adding it, is it tailwind or react
this was not problem with tailwind nor react , it was my browser and extensions, i removed those extensions and it is working
Trying to have a modal come in from Materialize-css that i get from that npm but nothing is showing up. I am using React with React Router v4 as well
I currently have it set up in my nav bar and the search-bar changes with the #modal1 identifier but the modal doesn't pop up. I would really like to avoid hacky things like have a line or two of jQuery in componentDidMount just for this because if thats the only solution I'll just go back to bootstrap.
I'm trying it with the code straight from the Docs. Please help!
<div className='container'>
<div id="modalHere" className="modal">
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div className="modal-footer">
Agree
</div>
</div>
<nav>
<div className="nav-wrapper blue-grey lighten-2">
<Link to='/professionals' className="brand-logo right"><img src={pegasusIcon} alt='OurTelos logo' className="OurTelosNavbarLogo"/></Link>
<ul id="nav-mobile" className="left">
<li><Link to="/professionals/sessions">Sessions</Link></li>
<li><a className="waves-effect waves-light btn modal-trigger" href="#modalHere">Modal</a></li>
</ul>
</div>
</nav>
</div>
EDIT
I added the jquery in my index file for the modal in a script tag and my modal does pop up but not properly. Take a look. Also if I use the example with the Fixed-Footer things seem to come out and work just fine.....why
EDIT 2
Now I am having an issue that the same modals from a single exported react component will no longer show after the page has been changed by react router...