Responsive Card - WindiCSS

Simple demonstration of the windicss-runtime-dom package by @antfu allowing rapid prototype development right in the browser.

by Nicholas Berlette

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<script src="https://cdn.skypack.dev/windicss-runtime-dom" type="module" crossorigin="anonymous" defer></script>
<div class="block" hidden>
    <div class="text-lg py-4 text-center mx-auto bg-primary-600 text-white shadow-2xl ring-4 ring-gray-50">
        Edit this page to see the magic of WindiCSS! 🎉
    </div>
    <!-- Note: You can use any standard WindiCSS utilities here! (and therefore almost any TailwindCSS utilities as well) -->
    <!-- You may also reference any of those pre-defined custom colors/utilities/components from the configuration below! -->
    <div class="flex items-center justify-center min-h-[40em] m-4 animate-animated animate-zoomOut animate-delay-1s">
        <div class="card relative">
            <div class="avatar bg-white shadow-md hover:shadow-2xl">
                <a href="https://github.com/nberlette" target="_blank" rel="noopener noreferrer" class="inline-block w-7/8 h-auto <md:mt-0.5 <lg:mt-[3px] lg:pt-1 animate-animated animate-heartBeat animate-slow animate-infinite">
                    <img src="https://cdn.jsdelivr.net/gh/nberlette/static/brand/logo.svg" alt="@nberlette" class="max-w-32" style="max-width:8rem;margin-top:3px" />
                </a>
            </div>
            <div class="flex flex-col space-y-6 w-full">
                <div class="flex flex-col w-full items-center place-items-center lg:items-start">
                    <h1 class="text-2xl tracking-tight text-center lg:text-left md:text-3xl lg:text-4xl lg:font-medium font-regular w-full shrink-0 lg:border-b lg:border-gray-400 lg:pb-2 lg:leading-12 text-primary-600">
                        <span class="no-sr hidden <sm:inline" aria-hidden="true">N.</span><span class="<sm:hidden lg:block inline">Nicholas</span><!-- -->
                        <!-- 
                     --><span class="font-black text-primary-800 lg:text-primary-900">Berlette</span>
       ...

JavaScript

window.windicssRuntimeOptions = {
	timing: 'immediate',
  /** Enable WindiCSS preflight feature */
  preflight: true,
  /** Scan the entire dom to infer the classnames on first load. longer TTFB but prevents FOUC. */
  extractInitial: true,
  /** Generate mock classes for browser to do the auto-completeion */
  mockClasses: false,
  /** Config object that is typically exported from windi.config.[js|ts|cjs|mjs] */
  config: {
    darkMode: "media",
    theme: {
      extend: {
        colors: {
          primary: {
            100: "#e4e1fe",
            200: "#cac3fd",
            300: "#ada4fa",
            400: "#968cf6",
            500: "#96BAFF",
            600: "#554bce",
            700: "#3c33ac",
            800: "#27208b",
            900: "#181373" 
          },
          success: {
            100: "#f1fcd4",
            200: "#dff9aa",
            300: "#c4ee7d",
            400: "#a7de5a",
            500: "#7fc92a",
            600: "#64ac1e",
            700: "#4b9015",
            800: "#36740d",
            900: "#266008"
          },
          warning: {
            100: "#fff4d1",
            200: "#ffe5a3",
            300: "#ffd375",
            400: "#ffc152",
            500: "#ffa319",
            600: "#db8212",
            700: "#b7650c",
            800: "#934a07",
            900: "#7a3804" 
          },
          danger: {
            100: "#ffe6d9",
            200: "#ffc7b4",
            300: "#ffa28e",
            400: "#ff7e72",
            500: "#ff4444",
            600: "#db3140",
            700: "#b7223c",
            800: "#931536",
            900: "#7a0d32" 
          } 
        },
        container: {
          padding: "2rem",
          center: true 
        } 
      } 
    },
    shortcuts: {
      "btn-round": "px-4 py-0 text-xs md:text-sm font-semibold rounded-full border md:border-2 lg:border-3 hover:shadow-lg shadow-md transition-all duration-700 ease-in focus:outline-none ring-2 ring-white no-underline",
     ...