Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                 <body class="bg-zinc-900 text-zinc-200">
   <div id="root"></div>
 </body>

              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body{
    font-family: 'Roboto', sans-serif; 
}

              
            
!

JS

              
                import React, { useRef } from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
import Countdown from 'https://cdn.skypack.dev/react-countdown';


const Icons = {
  market: () => (
    <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
  ),
  dashboard: () => (
    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
  ),
  favourites: () => (
    <path
      fillRule="evenodd"
      d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
      clipRule="evenodd"
    />
  ),
  trending: () => (
    <path
      fillRule="evenodd"
      d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
      clipRule="evenodd"
    />
  ),
  collection: () => (
    <path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
  ),
  wallet: () => (
    <>
      <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
      <path
        fillRule="evenodd"
        d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"
        clipRule="evenodd"
      />
    </>
  ),
  settings: () => (
    <path
      fillRule="evenodd"
      d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
      clipRule="evenodd"
    />
  ),
  logout: () => (
    <path
      fillRule="evenodd"
      d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z"
      clipRule="evenodd"
    />
  ),
};
const items = [
  {
    key: '1',
    artist: 4,
    image: 'https://assets.codepen.io/3685267/nft-dashboard-art-0.jpg',
    price: '3.8',
    title: 'People Abstract Painting',
    timeLeft: 84670923,
  },
  {
    key: '2',
    artist: 2,
    image: 'https://assets.codepen.io/3685267/nft-dashboard-art-1.jpg',
    price: '2.5',
    title: 'Abstract Art Painting',
    timeLeft: 12873491,
  },
  {
    key: '3',
    artist: 0,
    image: 'https://assets.codepen.io/3685267/nft-dashboard-art-2.jpg',
    price: '9.0',
    title: 'Purple Liquid Painting',
    timeLeft: 84720185,
  },
  {
    key: '4',
    artist: 3,
    image: 'https://assets.codepen.io/3685267/nft-dashboard-art-3.jpg',
    price: '16.5',
    title: 'Generative Art',
    timeLeft: 43826185,
  },
  {
    key: '5',
    artist: 2,
    image: 'https://assets.codepen.io/3685267/nft-dashboard-art-4.jpg',
    price: '4.0',
    title: 'Liquid Base Painting',
    timeLeft: 134627,
  },
  {
    key: '6',
    artist: 1,
    image: 'https://assets.codepen.io/3685267/nft-dashboard-art-5.jpg',
    price: '1.3',
    title: 'Colorful Wind Painting',
    timeLeft: 12008745,
  },
];
const artists = [
  {
    name: 'Raven Simmons',
    handler: '@raven',
    image: 'https://assets.codepen.io/3685267/nft-dashboard-pro-1.jpg',
  },
  {
    name: 'Uriah Gardner',
    handler: '@uriah',
    image: 'https://assets.codepen.io/3685267/nft-dashboard-pro-2.jpg',
  },
  {
    name: 'Colin Mitchell',
    handler: '@colin',
    image: 'https://assets.codepen.io/3685267/nft-dashboard-pro-4.jpg',
  },
  {
    name: 'Emely Hall',
    handler: '@emely',
    image: 'https://assets.codepen.io/3685267/nft-dashboard-pro-3.jpg',
  },
  {
    name: 'Raphael Scott',
    handler: '@raphael',
    image: 'https://assets.codepen.io/3685267/nft-dashboard-pro-5.jpg',
  },
];
const App = () => {
  return(
   <>
      <SidebarLeft />
      <Header />

      <div className="flex flex-col md:flex-row">
        <div className="w-48 hidden lg:block shrink-0" />
        <div className=" grow ">
          <Content />
          <Items />
        </div>
        <SidebarRight />
      </div>
    </>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))



function SidebarRight() {
  return (
    <div className="p-3 md:w-72 shrink-0 md:sticky md:top-16 shrink-0 h-full">
      <h2 className="text-xl font-semibold">Top Artists</h2>
      <ul className="mt-3 space-y-3">
        {artists.map(({ name, handler, image }) => (
          <li
            className="bg-zinc-800 rounded-md p-2 flex shadow-lg"
            key={handler}
          >
            <img
              src={image}
              className="w-12 h-12 rounded-md"
              alt={`top artist ${name}`}
            />
            <div className="ml-3">
              <h3 className="font-semibold">{name}</h3>
              <p className="text-sm text-zinc-400">{handler}</p>
            </div>
          </li>
        ))}
      </ul>
      <div className="w-full rounded-md bg-gradient-to-tr from-fuchsia-600 to-violet-600 mt-3 p-3 relative overflow-hidden">
        <div className="z-10 relative">
          <h2 className="text-white font-semibold">
            Buy a collection with ethereum
          </h2>
          <p className="text-white/50 text-sm mt-1 ">
            you can buy a collection of artwork with ethereum very easy and
            simple
          </p>
          <button className="bg-white w-full rounded-md h-12 text-gray-900 font-semibold mt-2">
            Get Started
          </button>
        </div>
        <div className="absolute left-0 right-0 top-0 z-0">
          <svg
            className="w-full"
            viewBox="0 0 679 360"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g clipPath="url(#clip0_2_2)">
              <path
                d="M102.854 22L159.666 116.276L102.854 90.4544V22Z"
                fill="#8A92B2"
                fillOpacity="0.35"
              />
              <path
                d="M102.854 90.4544L159.666 116.276L102.854 149.866V90.4544Z"
                fill="#62688F"
                fillOpacity="0.35"
              />
              <path
                d="M46.0315 116.276L102.854 22V90.4544L46.0315 116.276Z"
                fill="#62688F"
                fillOpacity="0.35"
              />
              <path
                d="M102.854 149.866L46.0315 116.276L102.854 90.4544V149.866Z"
                fill="#454A75"
                fillOpacity="0.35"
              />
              <path
                d="M159.666 127.055L102.854 207.12V160.625L159.666 127.055Z"
                fill="#8A92B2"
                fillOpacity="0.35"
              />
              <path
                d="M102.854 160.625V207.12L46 127.055L102.854 160.625Z"
                fill="#62688F"
                fillOpacity="0.35"
              />
              <circle
                cx="552"
                cy="35"
                r="132"
                stroke="white"
                strokeOpacity="0.1"
                strokeWidth="10"
              />
              <circle
                cx="640"
                cy="115"
                r="132"
                stroke="white"
                strokeOpacity="0.1"
                strokeWidth="10"
              />
            </g>
            <defs>
              <clipPath id="clip0_2_2">
                <rect width="679" height="360" fill="white" />
              </clipPath>
            </defs>
          </svg>
        </div>
      </div>
    </div>
  );
}


function Items() {
  return (
    <ul className="p-1.5 flex flex-wrap">
      {items.map(({ key, artist, image, price, title, timeLeft }) => (
        <li className="w-full lg:w-1/2 xl:w-1/3  p-1.5" key={key}>
          <a
            className="block bg-zinc-800 rounded-md w-full overflow-hidden pb-4 shadow-lg"
            href="#items"
          >
            <div
              className="w-full h-40 bg-center bg-cover relative"
              style={{ backgroundImage: `url(${image})` }}
            >
              <div className="absolute left-1/2 -translate-x-1/2 bottom-2  w-5/6 bg-white rounded-md flex items-center bg-opacity-30 backdrop-blur-md">
                <div className="w-1/2 p-3">
                  <h3 className="font-semibold">Current Bid</h3>
                  <div className="">{price} ETH</div>
                </div>
                <div className="w-1/2 p-3">
                  <h3 className="font-semibold">Ending in</h3>
                  <Countdown
                    date={Date.now() + timeLeft}
                    renderer={({ hours, minutes, seconds }) => (
                      <div className="">{`${hours}h: ${minutes}m: ${seconds}s`}</div>
                    )}
                  />
                </div>
              </div>
            </div>
            <h3 className="font-semibold text-lg px-3 mt-2">{title}</h3>
            <div className="flex items-center px-3 mt-2">
              <img
                src={artists[artist].image}
                className="w-10 h-10 rounded-full"
                alt="item-owner"
              />
              <span className=" ml-2 text-zinc-400">
                {artists[artist].handler}
              </span>
            </div>
            <div className="flex mt-2">
              <div className="p-3 w-1/2">
                <button className="bg-gradient-to-tr from-fuchsia-600 to-violet-600  w-full h-12 rounded-md font-semibold">
                  Place a bid
                </button>
              </div>
              <div className="p-3 w-1/2">
                <button className="bg-gradient-to-tr from-fuchsia-600 to-violet-600  w-full rounded-md font-semibold h-12 p-px">
                  <div className="bg-zinc-800 w-full h-full rounded-md grid place-items-center">
                    View artwork
                  </div>
                </button>
              </div>
            </div>
          </a>
        </li>
      ))}
    </ul>
  );
}

function ArtworkSelector({ text, index }) {
  return (
    <li className="">
      <button
        className={` ${
          index ? 'text-zinc-500' : 'text-fuchsia-600 underline font-bold'
        }`}
      >
        {text}
      </button>
    </li>
  );
}

function Content() {
  return (
    <div className="">
      <h1 className="text-2xl font-bold px-3 mt-3">Dashboard</h1>
      <h2 className="text-zinc-500 px-3">
        Buy and sell digital artwork, NFT collection
      </h2>
      <div className="p-3">
        <div
          className="w-full h-44  rounded-md bg-center bg-cover flex flex-col justify-center px-4"
          style={{
            backgroundImage:
              'url(https://assets.codepen.io/3685267/nft-dashboard-art-6.jpg)',
          }}
        >
          <h2 className="font-bold text-3xl max-w-sm">
            Find a collection of best artwork here
          </h2>
          <button className="py-2 bg-gradient-to-tr from-fuchsia-600 to-violet-600 rounded-md w-44 mt-3">
            Explore Now
          </button>
        </div>
      </div>

      <div className="flex flex-col md:flex-row justify-between px-3 mt-3">
        <h2 className="text-xl font-semibold">Trending Artworks</h2>
        <ul className="inline-flex space-x-3 ">
          {['Art', 'Collectables', 'Music', 'Sport'].map((text, index) => (
            <ArtworkSelector key={text} text={text} index={index} />
          ))}
        </ul>
      </div>
    </div>
  );
}

function Header() {
  return (
    <div className="flex flex-wrap p-3 items-center sticky top-0 bg-zinc-900 h-fit  md:h-16 z-30">
      <div className="flex items-center grow md:grow-0 w-fit md:w-48">
        <div className="w-10 h-10 bg-gradient-to-tr from-fuchsia-600 to-violet-600 grid place-items-center rounded-full font-bold text-white  text-2xl">
          D
        </div>
        <div className="ml-2 font-bold text-xl">DIGIART</div>
      </div>

      <div className="flex items-center order-2 md:order-3 pl-0 md:pl-3">
        <div className="relative">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-7 w-7"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
          </svg>
          <div className="absolute right-0 top-0 w-3 h-3 bg-zinc-900 rounded-full p-0.5">
            <div className="bg-red-500 w-full h-full  rounded-full" />
          </div>
        </div>
        <img
          src="https://assets.codepen.io/3685267/nft-dashboard-pro-1.jpg"
          alt="user"
          className="w-10 h-10 rounded-full ml-4"
        />
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="h-7 w-7 ml-4"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            fillRule="evenodd"
            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
            clipRule="evenodd"
          />
        </svg>
      </div>

      <div className="flex  mt-4 md:mt-0 order-3 md:order-2 w-full grow md:w-fit ">
        <button className="w-10 h-10 rounded-md bg-zinc-700 grid place-items-center mr-2 block md:hidden">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M4 6h16M4 12h16M4 18h16"
            />
          </svg>
        </button>
        <form className="relative grow md:max-w-lg">
          <input
            type="text"
            className="bg-zinc-700 pl-3 pr-10 h-10 rounded-md w-full "
            placeholder="search for collection"
          />
          <span className="absolute right-0 top-0 bottom-0 w-10 grid place-items-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-5 w-5"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fillRule="evenodd"
                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                clipRule="evenodd"
              />
            </svg>
          </span>
        </form>
      </div>
    </div>
  );
}



function SidebarItem({ text, index }) {
  return (
    <li className="relative">
      {index === 1 ? (
        <div className="absolute -left-1 top-0 bg-fuchsia-600 w-2 h-8 rounded-full" />
      ) : null}
      <a
        href="#"
        className={`pl-4 flex items-center capitalize   ${
          index === 1 ? 'text-white' : 'text-zinc-500'
        }`}
      >
        <span
          className={`bg-zinc-800 w-8 h-8 grid place-items-center mr-2 rounded-md ${
            index === 1 ? 'bg-fuchsia-600' : 'bg-zinc-800'
          }`}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-5 w-5"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            {Icons[text]()}
          </svg>
        </span>
        {text}
      </a>
    </li>
  );
}


function SidebarLeft() {
  return (
    <div className="hidden lg:flex h-screen flex-col justify-between w-48 fixed left-0 top-0 bottom-0 pt-24">
      <ul className="space-y-8">
        {[
          'market',
          'dashboard',
          'favourites',
          'trending',
          'collection',
          'wallet',
          'settings',
        ].map((key, index) => (
          <SidebarItem key={key} text={key} index={index} />
        ))}
      </ul>
      <div className="pb-5  px-4">
        <hr className="mb-5 text-zinc-700" />
        <a href="#" className="py-2 flex items-center  text-zinc-500">
          <span className="bg-zinc-800 w-8 h-8 grid place-items-center mr-2 rounded-md">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-5 w-5"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              {Icons.logout()}
            </svg>
          </span>
          Logout
        </a>
      </div>
    </div>
  );
}

              
            
!
999px

Console