Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Aquí tienes el código HTML y CSS convertido a JSX con Tailwind CSS para Next.js:


```jsx

import React from 'react';


const Sidebar = () => {

  return (

    <div className="sidebar w-60 h-screen p-10 bg-white transition-transform ease-in-out duration-300 overflow-hidden hover:w-200">

      <div className="item flex items-center my-20">

        <img className="icon w-40 h-35 flex-shrink-0 fill-#424242" src="/icon1" />

        <div className="text opacity-0 transition-opacity duration-300 transition-delay-200 ml-6 whitespace-nowrap">The App</div>

      </div>

      <hr className="my-6 border-t-2 border-gray-300" />

      <div className="item flex items-center my-20">

        <img className="icon w-40 h-35 flex-shrink-0 fill-#424242" src="/icon2" />

        <div className="text opacity-0 transition-opacity duration-300 transition-delay-200 ml-6 whitespace-nowrap">Dashboard</div>

      </div>

      <div className="item flex items-center my-20">

        <img className="icon w-40 h-35 flex-shrink-0 fill-#424242" src="/icon3" />

        <div className="text opacity-0 transition-opacity duration-300 transition-delay-200 ml-6 whitespace-nowrap">Search</div>

      </div>

      <div className="item flex items-center my-20">

        <img className="icon w-40 h-35 flex-shrink-0 fill-#424242" src="/icon4" />

        <div className="text opacity-0 transition-opacity duration-300 transition-delay-200 ml-6 whitespace-nowrap">Insights</div>

      </div>

      <div className="item flex items-center my-20">

        <img className="icon w-40 h-35 flex-shrink-0 fill-#424242" src="/icon4" />

        <div className="text opacity-0 transition-opacity duration-300 transition-delay-200 ml-6 whitespace-nowrap">Docs</div>

      </div>

      <div className="item flex items-center my-20">

        <img className="icon w-40 h-35 flex-shrink-0 fill-#424242" src="/icon5" />

        <div className="text opacity-0 transition-opacity duration-300 transition-delay-200 ml-6 whitespace-nowrap">Settings</div>

      </div>

    </div>

  );

};


export default Sidebar;

```


Este código JSX representa un componente React que utiliza Tailwind CSS para estilizar la barra lateral y sus elementos en una aplicación Next.js. Asegúrate de tener configurado Tailwind CSS en tu proyecto Next.js para que estas clases funcionen correctamente.