Training Experience - Copy this React, Tailwind Component to your project

do styles and component with this style:import React, { ReactElement, useState } from "react"; interface IExperienceCardProps { experience: { role: string; company: string; period: string; description: { backend: string; frontend: string; }; backendTechnologies: { name: string; icon: ReactElement }[]; frontendTechnologies: { name: string; icon: ReactElement }[]; image: string; }; } export const ExperienceCard: React.FC<IExperienceCardProps> = ({ experience }) => { const [showStack, setShowStack] = useState(false); return ( <div className="text-start border-2 border-mariner-400 rounded-lg flex flex-col gap-2"> <header className="bg-mariner-950 flex items-center justify-around justify-items-cente p-6 border-b-4 border-t-2 border-x-2 border-mariner-400 shadow-neon"> <div className="w-2/3"> <h3 className="text-xl font-semibold text-mariner-100">{experience.role}</h3> <p className="text-md text-mariner-300">{experience.company}</p> <span className="text-sm text-mariner-400">{experience.period}</span> </div> <div className="w-1/2 flex items-center justify-center"> <img src={experience.image} alt={`${experience.company} logo`} loading="lazy" className="max-w-full max-h-full" /> </div> </header> {/* Tecnologías */} <div className="flex flex-col gap-4 p-6"> {showStack ? ( <> {/* Backend Technologies */} <div className="mb-8"> <h4 className="text-xl font-bold text-mariner-100 neon-effect mb-4 text-left">Backend</h4> <div className="flex flex-wrap justify-center items-center gap-6 mt-4"> {experience.backendTechnologies.map( (tech: { name: string; icon: ReactElement }, idx: number) => ( <div key={idx} className="flex flex-col items-center"> <div className="text-4xl">{tech.icon}</div> <p className="mt-2 text-white text-lg font-semibold hover:text-mariner-200 transition-all"> {tech.name} </p> </div> ) )} </div> </div> {/* Frontend Technologies */} <div> <h4 className="text-xl font-bold text-mariner-100 neon-effect mb-4 text-left">Frontend</h4> <div className="flex flex-wrap justify-center items-center gap-6 mt-4"> {experience.frontendTechnologies.map( (tech: { name: string; icon: ReactElement }, idx: number) => ( <div key={idx} className="flex flex-col items-center"> <div className="text-4xl">{tech.icon}</div> <p className="mt-2 text-white text-lg font-semibold hover:text-mariner-200 transition-all"> {tech.name} </p> </div> ) )} </div> </div> </> ) : ( <> {/* Descripción Backend */} <div> <h4 className="text-xl font-bold text-mariner-100 neon-effect mb-4 text-left"> Backend </h4> <p className="text-mariner-300 leading-relaxed font-semibold"> {experience.description.backend} </p> </div> {/* Descripción Frontend */} <div> <h4 className="text-xl font-bold text-mariner-100 neon-effect mb-4 text-left"> Frontend </h4> <p className="text-mariner-300 leading-relaxed font-semibold"> {experience.description.frontend} </p> </div> </> )} </div> {/* Botón para cambiar entre stack o descripción */} <div className="text-center mb-4"> <button onClick={() => setShowStack(!showStack)} className="px-6 py-2 bg-mariner-700 text-mariner-100 font-semibold rounded-full" > {showStack ? "Ver Descripción" : "Ver Stack"} </button> </div> </div> ); };import React from "react"; import { SectionTitle } from "./SectionTitle"; import { FaReact, FaSymfony, FaNodeJs, FaAws, FaDocker } from "react-icons/fa"; import { SiNestjs, SiMysql, SiTailwindcss, SiVite, SiRabbitmq, SiFlask, SiPython, SiMongodb, } from "react-icons/si"; import { TbBrandSocketIo } from "react-icons/tb"; import { ExperienceCard } from "./ExperienceCards"; const experiences = [ { role: "Software Developer", company: "Feeder the Reaction App SL", period: "Junio 2024 - Presente", description: { backend: "Diseño y desarrollo de soluciones completas siguiendo principios de arquitectura limpia (DDD) y patrones de Event-Driven Architecture. Implementación de APIs escalables y microservicios, garantizando robustez y flexibilidad.", frontend: "Diseño y desarrollo de interfaces de usuario modernas y dinámicas con React, mejorando la experiencia del usuario en diversos productos.", }, backendTechnologies: [ { name: "Symfony", icon: <FaSymfony className="text-4xl" /> }, { name: "NestJS", icon: <SiNestjs className="text-4xl text-pink-500" /> }, { name: "MySQL", icon: <SiMysql className="text-4xl text-blue-500" /> }, { name: "Node.js", icon: <FaNodeJs className="text-4xl text-green-500" /> }, { name: "RabbitMQ", icon: <SiRabbitmq className="text-4xl text-orange-500" /> }, { name: "Socket.IO", icon: <TbBrandSocketIo className="text-4xl text-teal-500" /> }, { name: "AWS", icon: <FaAws className="text-4xl text-blue-500" /> }, { name: "Docker", icon: <FaDocker className="text-4xl text-blue-500" /> }, ], frontendTechnologies: [ { name: "React", icon: <FaReact className="text-4xl text-mariner-400" /> }, { name: "TailwindCSS", icon: <SiTailwindcss className="text-4xl text-mariner-400" /> }, { name: "Vite", icon: <SiVite className="text-4xl text-purple-400" /> }, ], image: "https://cdn.prod.website-files.com/5ec807c5d85901644b2db3b2/5fb637f59666baea40468771_logo_h.png", }, { role: "Full Stack Developer", company: "Sensing Tex S.L.", period: "Septiembre 2023 - Junio 2024", description: { backend: "Desarrollo de APIs RESTful y APIs Socket con Flask y Python, usado MongoDB cómo base de datos NoSQL", frontend: "Diseño y desarrollo de interfaces de usuario modernas y dinámicas con React y Tailwind mejorando la experiencia del usuario en diversos productos.", }, backendTechnologies: [ { name: "Flask", icon: <SiFlask className="text-4xl text-white" /> }, { name: "Python", icon: <SiPython className="text-4xl text-blue-500" /> }, { name: "MongoDB", icon: <SiMongodb className="text-4xl text-green-500" /> }, { name: "Socket.IO", icon: <TbBrandSocketIo className="text-4xl text-teal-500" /> }, ], frontendTechnologies: [ { name: "React", icon: <FaReact className="text-4xl text-mariner-400" /> }, { name: "TailwindCSS", icon: <SiTailwindcss className="text-4xl text-mariner-400" />, }, ], image: "https://sensingtex.com/wp-content/uploads/2017/11/Logo-Sensingtex.png", }, ]; const Experience: React.FC = () => { return ( <section className="py-16 text-white "> <SectionTitle title="Experiencia" /> <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-5"> {experiences.map((experience, index) => ( <ExperienceCard key={index} experience={experience} /> ))} </div> </section> ); }; export default Experience; import React from "react"; interface ISectionTitleProps { title: string; } export const SectionTitle: React.FC<ISectionTitleProps> = ({ title }) => { return ( <div className="flex justify-center items-center mb-12 relative"> <div className="relative flex items-center justify-center border-2 border-mariner-400 rounded-lg px-8 py-4 shadow-neon z-20"> <h2 className="text-4xl md:text-5xl font-bold text-mariner-100 drop-shadow-neon-mariner px-8 py-2 "> {title} </h2> <div className="absolute inset-0 border-2 border-mariner-400 rounded-lg" /> </div> </div> ); }; mariner: { 50: "#eff8ff", 100: "#daefff", 200: "#bee3ff", 300: "#91d2ff", 400: "#5db8fd", 500: "#3799fa", 600: "#217bef", 700: "#1a66e0", 800: "#1b51b2", 900: "#1c478c", 950: "#162c55", },