Instalación React

      
export const PrimaryCard = () => {
    return (
        
<article class="w-full md:w-80 bg-white border-none shadow-lg hover:shadow-xl transition-all duration-300 rounded-xl p-6">
  <header class="relative pb-0">
    <div class="absolute top-4 right-4">
      <span class="px-2 py-1 text-xs font-semibold text-white bg-emerald-500 rounded-lg hover:bg-emerald-800 transition duration-150">PRO</span>
    </div>
    <div class="flex flex-col items-center">
      <figure class="border-white border-solid shadow-md px-3 py-2 rounded-full">
        <i class="ri-user-line text-3xl"></i>
      </figure>
      <h2 class="mt-4 text-xl font-semibold">Jane Doe</h2>
      <p class="text-gray-500">Product Designer</p>
    </div>
  </header>
  <section class="pt-6">
    <div class="flex justify-between text-center mb-6">
      <div class="flex-1">
        <p class="text-2xl font-bold text-gray-900">28</p>
        <p class="text-xs text-gray-500">Projects</p>
      </div>
      <div class="flex-1">
        <p class="text-2xl font-bold text-gray-900">160</p>
        <p class="text-xs text-gray-500">Likes</p>
      </div>
      <div class="flex-1">
        <p class="text-2xl font-bold text-gray-900">5.2k</p>
        <p class="text-xs text-gray-500">Followers</p>
      </div>
    </div>
    <div class="space-y-2">
      <div class="flex justify-between text-sm">
        <span class="text-gray-500">Profile Completion</span>
        <span class="font-medium">85%</span>
      </div>
      <div class="w-full bg-gray-100 h-2 rounded-full overflow-hidden">
        <div class="bg-blue-500 h-2 w-[85%]"></div>
      </div>
    </div>
  </section>
  <footer class="flex gap-2 items-center mt-4">
    <button class="cursor-pointer flex-1 flex items-center justify-center px-3 py-2 text-sm border border-gray-200 rounded-lg">
      <i class="ri-heart-fill text-lg text-rose-500"></i>
      <span class="ml-1">Liked</span>
    </button>
    <button class="cursor-pointer flex-1 flex items-center justify-center px-3 py-2 text-sm border border-gray-200 rounded-lg">
      <i class="ri-message-3-line text-lg text-gray-500"></i>
      <span class="ml-1">Message</span>
    </button>
    <button class="cursor-pointer w-9 h-9 flex items-center justify-center border border-gray-200 rounded-lg">
      <i class="ri-share-line text-lg text-gray-500"></i>
    </button>
  </footer>
</article>
      );
};



    

      

export const SecondaryCard = () => {
    return (
      <article className="flex flex-col w-96 rounded-2xl gap-2 shadow-xl py-4 transition duration-150 hover:shadow-2xl">
        <img  src="/React.svg" alt="react-svg" className=" bg-slate-200 w-full h-52"/>
        <div className="flex px-3 items-center gap-3 pt-2"> <span className="text-base font-bold">Tecnologia</span> <span className="text-sm text-slate-500">Lectura 5 min</span></div>
        <div className="flex flex-col gap-1 px-3">
          <h3 className="text-2xl font-semibold">El futuro de la IA en el desarrollo web</h3>
          <p className="text-slate-600">Descubre cómo la inteligencia artificial está transformando la manera en que diseñamos y desarrollamos sitios web.</p>
        </div>
        <div className=" flex justify-between px-3">
          <span className="flex gap-2 items-center text-sm"><i className="ri-user-fill"></i>Por Alex Brown</span>
          <a href="#" className="text-cyan-500 transition duration-150  hover:underline font-bold">Leer más</a>
        </div>
      </article>
    );
  };

    

      
export default function ThirdCard() {
  return (
    <div className="w-[300px] overflow-hidden bg-white rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
      <div className="relative aspect-square overflow-hidden">
        <img
          src="/React.svg"
          alt="react-svg"
          className="w-full opacity-60 h-full object-cover transition-transform duration-300 ease-in-out hover:scale-110"
        />
        <span className="absolute top-2 right-2 bg-blue-600 text-white text-xs font-semibold px-2 py-1 rounded">New</span>
      </div>
      <div className="p-4">
        <h2 className="text-lg font-semibold mb-2">Minimalist Desk Lamp</h2>
        <p className=" text-gray-500 mb-2">Adjustable arm with warm LED light</p>
        <div className="flex items-center justify-between px-1">
          <span className="text-lg font-bold">$89.99</span>
          <div className="flex items-center">
            <i className="ri-star-fill text-yellow-400 h-4 w-4" aria-hidden="true"></i>
            <span className="ml-1 text-sm">4.8 <span className="sr-only">(out of 5 stars)</span></span>
          </div>
        </div>
      </div>
      <div className="p-4 pt-0">
        <button
          className="w-full flex items-center justify-center bg-blue-600 text-white py-2 rounded transition-transform duration-300 ease-in-out group hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          aria-label="Add Minimalist Desk Lamp to cart"
        >
          Add to Cart
          <i className="ri-add-line ml-2 h-4 w-4 transition-transform duration-300 ease-in-out group-hover:rotate-180" aria-hidden="true"></i>
        </button>
      </div>
    </div>
  );
}

    

      
export default function PrimaryInput() {
  let email = '';

  const handleEmailChange = (e) => {
    email = e.target.value;
  };

  return (
    <div className="space-y-2 w-full max-w-md">
      <label htmlFor="email" className="block  font-medium text-gray-700">Email</label>
      <input
        type="email"
        id="email"
        placeholder="Enter your email"
        value={email}
        onChange={handleEmailChange}
        className="block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 border-gray-300 focus:ring-blue-500"
      />
    </div>
  );
}



    

      
export default function SecondaryInput() {
    let password = '';
    let showPassword = false;
  
    const handlePasswordChange = (e) => {
      password = e.target.value;
    };
  
    const togglePasswordVisibility = () => {
      showPassword = !showPassword;
    };
  
    return (
      <div className="space-y-2 w-full max-w-md">
        <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
        <div className="relative">
          <input
            type={showPassword ? 'text' : 'password'}
            id="password"
            placeholder="Enter your password"
            value={password}
            onChange={handlePasswordChange}
            className="block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 border-gray-300 focus:ring-blue-500"
          />
          <button
            type="button"
            className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
            onClick={togglePasswordVisibility}
            aria-label={showPassword ? 'Hide password' : 'Show password'}
          >
            {showPassword ? (
              <i className="ri-eye-off-line h-4 w-4" aria-hidden="true"></i>
            ) : (
              <i className="ri-eye-line h-4 w-4" aria-hidden="true"></i>
            )}
          </button>
        </div>
      </div>
    );
  }
  



    

      

export default function PrimatyAlert() {
  return (
    <div className="flex items-center p-3 rounded-2xl bg-blue-100 text-blue-700" role="alert">
      <i className="ri-information-line mr-2"></i>
      <span>This is an informational alert message.</span>
    </div>
  );
}


    

      
export default function PrimaryForm() {
  return (
    <div className="w-full max-w-xs mx-auto border rounded p-4 transition duration-150 shadow-xl hover:shadow-2xl">
      <h2 className="text-xl font-bold mb-2">Login</h2>
      <p className="text-gray-600 mb-4 max-sm:text-base ">Enter your credentials to access your account</p>
      <form className="space-y-4">
        <div className="space-y-2">
          <label htmlFor="email" className="block font-medium">Email</label>
          <div className="relative">
            <i className="ri-mail-line absolute left-3 top-3 text-gray-400"></i>
            <input id="email" type="email" placeholder="Enter your email" className="w-full pl-10 p-2 border rounded" />
          </div>
        </div>
        <div className="space-y-2">
          <label htmlFor="password" className="block font-medium">Password</label>
          <div className="relative">
            <i className="ri-lock-line absolute left-3 top-3 text-gray-400"></i>
            <input id="password" type="password" placeholder="Enter your password" className="w-full pl-10 p-2 border rounded" />
          </div>
        </div>
        <button type="submit" className="w-full bg-blue-500 transition duration-150 hover:bg-blue-700 text-white p-2 rounded mt-4">Log In</button>
      </form>
    </div>
  );
}


    

      
export default function SecondaryForm() {
  return (
    <div className="w-full max-w-2xl mx-auto border rounded p-4 shadow-xl hover:shadow-2xl">
      <h2 className="text-xl font-bold mb-2">Contact Us</h2>
      <p className="text-gray-600 mb-4">Send us a message and we will get back to you as soon as possible</p>
      <form className="space-y-4">
        <div className="space-y-2">
          <label htmlFor="name" className="block font-medium">Name</label>
          <div className="relative">
            <i className="ri-user-line absolute left-3 top-3 text-gray-400"></i>
            <input id="name" placeholder="Enter your name" className="w-full pl-10 p-2 border rounded" />
          </div>
        </div>
        <div className="space-y-2">
          <label htmlFor="message" className="block font-medium">Message</label>
          <textarea id="message" placeholder="Type your message here" className="w-full p-2 border rounded"></textarea>
        </div>
        <button type="submit" className="w-full bg-blue-500 transition duration-150 hover:bg-blue-700 text-white p-2 rounded mt-4">
          <i className="ri-send-plane-line mr-2"></i>
          Send Message
        </button>
      </form>
    </div>
  );
}



    

      


export default function SubscriptionForm() {
  return (
    <div className="w-full shadow-xl hover:shadow-2xl max-w-md mx-auto border rounded p-4">
      <h2 className="text-xl font-bold mb-2">Subscribe to Our Newsletter</h2>
      <p className="text-gray-600 mb-4">Stay updated with our latest news</p>
      <form className="space-y-4">
        <label className="block font-medium">Choose your plan</label>
        <div className="space-y-2">
          <label className="flex items-center">
            <input type="radio" name="plan" value="basic" className="mr-2" defaultChecked />
            Basic
          </label>
          <label className="flex items-center">
            <input type="radio" name="plan" value="premium" className="mr-2" />
            Premium
          </label>
          <label className="flex items-center">
            <input type="radio" name="plan" value="pro" className="mr-2" />
            Pro
          </label>
        </div>
        <button type="submit" className="w-full transition duration-150 hover:bg-blue-700 bg-blue-500 text-white p-2 rounded mt-4">
          <i className="ri-check-line mr-2"></i>
          Subscribe
        </button>
      </form>
    </div>
  );
}


    

      
export default function PrimaryTable() {
    return (
      <div className="overflow-x-auto bg-white shadow-md rounded-lg">
        <table className="min-w-full text-sm text-left text-gray-600">
          <thead className="bg-gray-200">
            <tr>
              <th className="px-6 py-3">#</th>
              <th className="px-6 py-3">Name</th>
              <th className="px-6 py-3">Age</th>
              <th className="px-6 py-3">Country</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="px-6 py-3">1</td>
              <td className="px-6 py-3">John Doe</td>
              <td className="px-6 py-3">25</td>
              <td className="px-6 py-3">USA</td>
            </tr>
            <tr className="bg-gray-50">
              <td className="px-6 py-3">2</td>
              <td className="px-6 py-3">Jane Smith</td>
              <td className="px-6 py-3">30</td>
              <td className="px-6 py-3">Canada</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
  


    

      
export default function SecondaryTable() {
  return (
    <div className="overflow-x-auto bg-white shadow-md rounded-lg">
      <div className="flex justify-between items-center p-4">
        <input
          type="text"
          placeholder="Search..."
          className="px-4 py-2 border rounded-lg text-sm w-1/4"
        />
        <div className="flex space-x-2">
          <button className="px-4 py-2 bg-blue-500 text-white text-sm rounded">Filter</button>
          <button className="px-4 py-2 bg-gray-500 text-white text-sm rounded">Reset</button>
        </div>
      </div>
      <table className="min-w-full text-sm text-left text-gray-600">
        <thead className="bg-blue-100">
          <tr>
            <th className="px-6 py-3">#</th>
            <th className="px-6 py-3">Name</th>
            <th className="px-6 py-3">Age</th>
            <th className="px-6 py-3">Country</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="px-6 py-3">1</td>
            <td className="px-6 py-3">John Doe</td>
            <td className="px-6 py-3">25</td>
            <td className="px-6 py-3">USA</td>
          </tr>
          <tr className="bg-gray-50">
            <td className="px-6 py-3">2</td>
            <td className="px-6 py-3">Jane Smith</td>
            <td className="px-6 py-3">30</td>
            <td className="px-6 py-3">Canada</td>
          </tr>
        </tbody>
      </table>
      <div className="flex justify-between items-center p-4">
        <div className="text-sm">Showing 1 to 2 of 50 entries</div>
        <div className="space-x-2">
          <button className="px-4 py-2 border rounded">Previous</button>
          <button className="px-4 py-2 border rounded">Next</button>
        </div>
      </div>
    </div>
  );
}


    

      


export const AccordionComponent = () => {
  return (
    <div className="w-full border border-gray-300 rounded-lg bg-black py-2 px-4">
      <details className="faq-border mb-4 pb-2 group max-lg:px-5">
        <summary className="text-white cursor-pointer flex justify-between items-center group-hover:underline">
          ¿Puedo usar esto en mi proyecto?
          <span className="ml-2">
            <svg
              className="w-4 h-4 transition-transform group-open:rotate-90"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M9 5l7 7-7 7"
              />
            </svg>
          </span>
        </summary>
        <p className="text-white pt-5">
          Sí. es de uso gratuito para proyectos personales y comerciales. No
          se requiere atribución.
        </p>
      </details>

      <details className="faq-border mb-4 pb-2 group max-lg:px-5">
        <summary className="text-white cursor-pointer flex justify-between items-center group-hover:underline">
          ¿Por qué no lo publicas como paquete npm?
          <span className="ml-2">
            <svg
              className="w-4 h-4 transition-transform group-open:rotate-90"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M9 5l7 7-7 7"
              />
            </svg>
          </span>
        </summary>
        <p className="text-white pt-5">
          La idea detrás de esto es darle propiedad y control sobre el código,
          permitiéndole decidir cómo se construyen y diseñan los componentes.
        </p>
      </details>

      <details className="faq-border mb-4 pb-2 group max-lg:px-5">
        <summary className="text-white cursor-pointer flex justify-between items-center group-hover:underline">
          ¿Qué frameworks son compatibles?
          <span className="ml-2">
            <svg
              className="w-4 h-4 transition-transform group-open:rotate-90"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M9 5l7 7-7 7"
              />
            </svg>
          </span>
        </summary>
        <p className="text-white pt-5">
          Puedes usarlo en cualquiera, React, Astro, Angular, Vue, etc.
        </p>
      </details>
    </div>
  );
};





    

      

export const AccordionComponent = () => {
  return (
    <div className="w-full">
      <details className="mb-2">
        <summary className="cursor-pointer px-4 py-2 font-medium bg-blue-600 text-white rounded-t-lg hover:bg-blue-700 flex items-center">
          <i className="ri-edit-2-line mr-2"></i>
          Custom Header 1
        </summary>
        <div className="px-4 py-2 bg-gray-100 text-gray-800 rounded-b-lg">
          This accordion has custom styling applied to it.
        </div>
      </details>

      <details className="mb-2">
        <summary className="cursor-pointer px-4 py-2 font-medium bg-blue-600 text-white rounded-t-lg hover:bg-blue-700 flex items-center">
          <i className="ri-settings-2-line mr-2"></i>
          Custom Header 2
        </summary>
        <div className="px-4 py-2 bg-gray-100 text-gray-800 rounded-b-lg">
          You can customize the colors, padding, and other styles.
        </div>
      </details>

      <details>
        <summary className="cursor-pointer px-4 py-2 font-medium bg-blue-600 text-white rounded-t-lg hover:bg-blue-700 flex items-center">
          <i className="ri-lightbulb-line mr-2"></i>
          Custom Header 3
        </summary>
        <div className="px-4 py-2 bg-gray-100 text-gray-800 rounded-b-lg">
          This demonstrates how flexible the accordion component can be.
        </div>
      </details>
    </div>
  );
};



    

      

export const Checkbox = () => {
  return (
    <div className="bg-black flex items-center space-x-2 p-2 rounded">
      <input
        type="checkbox"
        id="exampleCheckbox"
        name="example"
        className="peer"
      />
      <label
        htmlFor="exampleCheckbox"
        className="text-sm text-white font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
      >
        Accept terms and conditions
      </label>
    </div>
  );
};