So I recently started transitioning from vanilla CSS to Tailwind for more thorough customizability in my portfolio website. For context, I am hosting the site in GitHub pages and the CSS below is what I had for the vanilla CSS scroll. The idea was to have the cards stack as you scroll, but I can not figure it out with Tailwind. Any help would be deeply appreciated!!
/* FEATURED PROJECTS STYLES */
.featured-projects {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#featured-divider, #other-divider {
width: 60%;
height: 0.4rem;
background: white;
border-radius: 0.5rem;
}
.featured-projects h1 {
text-align: left;
position: relative;
flex-direction: row;
font-size: xx-large;
}
.project {
width:100%;
height: auto;
background:#f1f1f1;
border-radius: 1rem;
display: flex;
padding: 2rem;
justify-content: space-between;
padding: 3.5rem;
margin: 2rem 1rem;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.361);
/* Parallax */
position: sticky;
top: 10%;
overflow: hidden;
}
.project-details {
flex: 1;
max-width: 60%;
display: flex;
flex-direction: column;
text-align: left;
align-items: left;
justify-content: space-between;
box-sizing: border-box;
}
.project-details h2 {
font-size: x-large;
margin-bottom: 1rem;
text-align: left;
color: #333;
}
.project-details p {
font-size: large;
margin-bottom: 2rem;
text-align: left;
width: 100%;
color: #333;
}
.project-details button {
background-color: #333;
color: white;
border: 1px solid #333;
padding: 1rem;
font-size: large;
cursor: pointer;
border-radius: 0.5rem;
font-weight: bold;
align-self: flex-start;
}
.project-details button:hover {
background-color: #009643;
color: white;
}
/* Right Side: Image */
.project-image {
display: flex;
justify-content: flex-end;
align-items: center;
}
.project-image img {
width: 300px;
border-radius: 5%;
height: auto;
}
Here is my HTML with TailWind so far:
<!-- Featured Projects -->
<section class="featured-projects flex flex-col my-10">
<div class="featured-header flex items-center">
<h1 class="text-3xl font-bold">FEATURED PROJECTS</h1>
<div class="decor flex-1 border-t bg-neutral-50 ms-6 p-0.75 rounded-full" id="featured-divider"></div>
</div>
<div class="project flex flex-row bg-neutral-50 rounded-2xl p-15 text-neutral-800 my-5" id="project-1">
<!-- Left Side: Text Content -->
<div class="project-details flex flex-col w-2/3">
<h2 class="text-2xl font-bold">Laboratoria: Partnerships Communications</h2>
<p class="text-m mr-10 my-5">Laboratoria is a Latin American non-profit focused on providing access to tech education for women of vulnerable populations. During my time as an intern with the Partnerships team I worked on improving the design of newsletters. Through UX research and design techniques I worked on fostering deeper bonds with students, graduates, and stakeholders. </p>
<button class="button bg-neutral-800 text-neutral-50 font-extrabold text-m rounded-2xl p-4 max-w-40 w-3xs hover:bg-green-600 hover:text-neutral-800 cursor-pointer" id="laboratoria-btn">View Project</button>
</div>
<!-- Right Side: Image -->
<figure class="project-image w-1/3">
<img class="rounded-2xl w-75 align-middle" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStvWMAvhXjBUD4SgK-umiZxPPtjgHmNmNRhw&s" alt="Laboratoria" width="100">
</figure>
</div>
<div class="project flex flex-row bg-neutral-50 rounded-2xl p-15 text-neutral-800 my-5" id="project-2">
<!-- Left Side: Text Content -->
<div class="project-details flex flex-col w-2/3">
<h2 class="text-2xl font-bold">Memory Matters: Remembering Genocide</h2>
<p class="text-m mr-10 my-5">Memory Matters was a collaborative comparative historical study of sites of memorialization in Bosnia, Cambodia, and Rwanda. Working with Dr. Quinsaat and two students we developed a framework to analyze memorial sites based on context and perspective. I focused on the Kigali Genocide Memorial and contributed to the overall framework and analysis.</p>
<button class="button bg-neutral-800 text-neutral-50 font-extrabold text-m rounded-2xl p-4 max-w-40 w-3xs hover:bg-green-600 hover:text-neutral-800 cursor-pointer" id="memory-btn">View Project</button>
</div>
<!-- Right Side: Image -->
<figure class="project-image w-1/3">
<img class="rounded-2xl w-75 align-middle" src="https://github.com/ElisaCarrascoLanusse/Portfolio/blob/main/assets/images/memory-matters-img.png?raw=true" width="100">
</figure>
</div>
<div class="project flex flex-row bg-neutral-50 rounded-2xl p-15 text-neutral-800 my-5" id="project-3">
<!-- Left Side: Text Content -->
<div class="project-details flex flex-col w-2/3">
<h2 class="text-2xl font-bold">Labor Violations: Eastern Missouri</h2>
<p class="text-m mr-10 my-5">The Anti-Trafficking in Persons team at the International Institute of Saint Louis supports human trafficking-affected individuals in the St. Louis area. During my internship, I analyzed government data on labor violation trends using R to visualize patterns and assist trafficking prevention stakeholders to generate data-based solutions.</p>
<button class="button bg-neutral-800 text-neutral-50 font-extrabold text-m rounded-2xl p-4 max-w-40 w-3xs hover:bg-green-600 hover:text-neutral-800 cursor-pointer" id="atip-btn">View Project</button>
</div>
<!-- Right Side: Image -->
<figure class="project-image w-1/3">
<img class="rounded-2xl w-75 align-middle" src="https://github.com/ElisaCarrascoLanusse/Portfolio/blob/main/assets/images/iistl-img.png?raw=true" alt="International Institute of St. Louis" width="100">
</figure>
</div>
</section>
I honestly don't even know where to start there, so I just kind of played around with it and did not get anywhere near where I wanted.
<div class="relative h-[300vh]">
<div class="sticky top-0 flex justify-center items-center h-screen">
<div class="relative w-full max-w-4xl">
<!-- Project 1 -->
<div class="project absolute inset-0 flex flex-row bg-neutral-50 rounded-2xl p-8 text-neutral-800 shadow-lg transition-transform duration-700 transform translate-y-0 z-30">
<div class="project-details flex flex-col w-2/3">
<h2 class="text-2xl font-bold">Laboratoria: Partnerships Communications</h2>
<p class="text-m mr-10 my-5">Laboratoria is a Latin American non-profit focused on providing access to tech education for women of vulnerable populations. During my time as an intern with the Partnerships team I worked on improving the design of newsletters. Through UX research and design techniques I worked on fostering deeper bonds with students, graduates, and stakeholders.</p>
<button class="button bg-neutral-800 text-neutral-50 font-extrabold text-m rounded-2xl p-4 max-w-40 w-3xs hover:bg-green-600 hover:text-neutral-800 cursor-pointer">View Project</button>
</div>
<figure class="project-image w-1/3">
<img class="rounded-2xl w-75 align-middle" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStvWMAvhXjBUD4SgK-umiZxPPtjgHmNmNRhw&s" alt="Laboratoria">
</figure>
</div>
<!-- Project 2 -->
<div class="project absolute inset-0 flex flex-row bg-neutral-50 rounded-2xl p-8 text-neutral-800 shadow-lg transition-transform duration-700 transform translate-y-20 z-20">
<div class="project-details flex flex-col w-2/3">
<h2 class="text-2xl font-bold">Memory Matters: Remembering Genocide</h2>
<p class="text-m mr-10 my-5">Memory Matters was a collaborative comparative historical study of sites of memorialization in Bosnia, Cambodia, and Rwanda. Working with Dr. Quinsaat and two students we developed a framework to analyze memorial sites based on context and perspective. I focused on the Kigali Genocide Memorial and contributed to the overall framework and analysis.</p>
<button class="button bg-neutral-800 text-neutral-50 font-extrabold text-m rounded-2xl p-4 max-w-40 w-3xs hover:bg-green-600 hover:text-neutral-800 cursor-pointer">View Project</button>
</div>
<figure class="project-image w-1/3">
<img class="rounded-2xl w-75 align-middle" src="https://github.com/ElisaCarrascoLanusse/Portfolio/blob/main/assets/images/memory-matters-img.png?raw=true">
</figure>
</div>
<!-- Project 3 -->
<div class="project absolute inset-0 flex flex-row bg-neutral-50 rounded-2xl p-8 text-neutral-800 shadow-lg transition-transform duration-700 transform translate-y-40 z-10">
<div class="project-details flex flex-col w-2/3">
<h2 class="text-2xl font-bold">Labor Violations: Eastern Missouri</h2>
<p class="text-m mr-10 my-5">The Anti-Trafficking in Persons team at the International Institute of Saint Louis supports human trafficking-affected individuals in the St. Louis area. During my internship, I analyzed government data on labor violation trends using R to visualize patterns and assist trafficking prevention stakeholders to generate data-based solutions.</p>
<button class="button bg-neutral-800 text-neutral-50 font-extrabold text-m rounded-2xl p-4 max-w-40 w-3xs hover:bg-green-600 hover:text-neutral-800 cursor-pointer">View Project</button>
</div>
<figure class="project-image w-1/3">
<img class="rounded-2xl w-75 align-middle" src="https://github.com/ElisaCarrascoLanusse/Portfolio/blob/main/assets/images/iistl-img.png?raw=true">
</figure>
</div>
</div>
</div>
</div>
