React

by Sebastian Kay

HTML

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<div data-theme="dark" class="navbar bg-base-100 shadow-sm">
  <div class="navbar-start fixed">
    <div class="dropdown">
      <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /> </svg>
      </div>
      <ul
        tabindex="-1"
        class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
        <li><a>Item 1</a></li>
        <li>
          <a>Parent</a>
          <ul class="p-2">
            <li><a>Submenu 1</a></li>
            <li><a>Submenu 2</a></li>
          </ul>
        </li>
        <li><a>Item 3</a></li>
      </ul>
    </div>
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="navbar-center hidden lg:flex">
    <ul class="menu menu-horizontal px-1">
      <li><a>Item 1</a></li>
      <li>
        <details>
          <summary>Parent</summary>
          <ul class="p-2">
            <li><a>Submenu 1</a></li>
            <li><a>Submenu 2</a></li>
          </ul>
        </details>
      </li>
      <li><a>Item 3</a></li>
    </ul>
  </div>
  <div class="navbar-end">
    <a class="btn">Button</a>
  </div>
</div>

<div class="relative min-h-[200px] bg-[#101317] flex flex-col m-20 p-7 rounded-2xl" id="app">
  <div class="">
    <button class="btn btn-primary">Button</button>
    <p>Das ist ein Demotext</p>
  </div>
</div>

CSS

:root {
  --base: #39aced;
  --background: #1d1d20;

  --lighter: oklch(from var(--base) clamp(0, l + 0.22, 1) calc(c * 0.9) h);
  --darker: oklch(from var(--base) clamp(0, l - 0.22, 1) calc(c * 0.92) h);
  --complement: hsl(from var(--base) calc(h - 180) s l);
  
  font-family: system-ui, sans-serif;
}

body {
  background-color: var(--background);
  min-height: 100vh;
}

.wrap{
  height: 100vh;
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

.box {
  width: 150px;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 2px 2px 12px #ddd;
}

.color {
  aspect-ratio: 1 / 1;
}

.name{
  padding: 0.5rem 1rem;
  font-weight: light;
}

JavaScript

document.querySelector("body").dataset.theme = "dark";