Move Inviqa example from play.tailwindcss.com

tailwindcss/inviqa/.envrc

@@ -0,0 +1 @@
+use flake

tailwindcss/inviqa/.gitignore

@@ -0,0 +1 @@
+/tailwind.css

tailwindcss/inviqa/flake.lock

@@ -0,0 +1,27 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1754214453,
+        "narHash": "sha256-Q/I2xJn/j1wpkGhWkQnm20nShYnG7TI99foDBpXm1SY=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "5b09dc45f24cf32316283e62aec81ffee3c3e376",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

tailwindcss/inviqa/flake.nix

@@ -0,0 +1,29 @@
+{
+  inputs.nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
+
+  outputs = inputs:
+    let
+      system = "x86_64-linux";
+      pkgs = import inputs.nixpkgs { inherit system; };
+    in
+    {
+      devShells.${system}.default = pkgs.mkShell {
+        packages = with pkgs; [
+          (pkgs.writeShellApplication {
+            name = "serve";
+
+            runtimeInputs = with pkgs; [
+              simple-http-server
+              tailwindcss_3
+            ];
+
+            text = ''
+              simple-http-server --index --nocache "$@" & \
+              tailwindcss --input input.css --output tailwind.css --watch & \
+              wait
+            '';
+          })
+        ];
+      };
+    };
+}

tailwindcss/inviqa/index.html

@@ -0,0 +1,29 @@
+<link href="/tailwind.css" rel="stylesheet" />
+
+<div class="min-h-screen flex flex-col p-24 justify-center bg-white">
+  <!-- Themes: blue, purple and teal -->
+  <div data-theme="teal" class="mx-auto max-w-6xl">
+    <h2 class="sr-only">Featured case study</h2>
+    <section class="font-sans text-black">
+      <div class="[ lg:flex lg:items-center ] [ fancy-corners fancy-corners--large fancy-corners--top-left fancy-corners--bottom-right ]">
+        <div class="flex-shrink-0 self-stretch sm:flex-basis-40 md:flex-basis-50 xl:flex-basis-60">
+          <div class="h-full">
+            <article class="h-full">
+              <div class="h-full">
+                <img class="h-full object-cover" src="/XD-1.jpeg" width="733" height="412" alt='""' typeof="foaf:Image" />
+              </div>
+            </article>
+          </div>
+        </div>
+        <div class="p-6 bg-grey">
+          <div class="leading-relaxed">
+            <h2 class="leading-tight text-4xl font-bold">CXcon: Experience Transformation</h2>
+            <p class="mt-4">Our second CXcon in October was dedicated to experience transformation. The free one-day virtual event&nbsp;brought together 230+ heads of digital, thought leaders, and UX practitioners to discuss all aspects of experience design..</p>
+            <p class="mt-4">In a jam-packed day filled with keynote sessions, panels, and virtual networking we explored topics including design leadership, UX ethics, designing for emotion and innovation at scale.</p>
+            <p><a class="mt-4 button button--secondary" href="https://inviqa.com/cxcon-experience-transformation">Explore this event</a></p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>

tailwindcss/inviqa/input.css

@@ -0,0 +1,151 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .button {
+    @apply px-5 py-2 inline-block text-lg font-bold border-2 duration-200 transition-colors ease-in-out;
+  }
+
+  [data-theme="blue"] .button--secondary {
+    @apply bg-red border-red text-white hover:bg-white hover:text-red;
+  }
+
+  [data-theme="purple"] .button--secondary {
+    @apply bg-orange border-orange text-purple hover:bg-white hover:text-purple hover:border-purple;
+  }
+
+  [data-theme="teal"] .button--secondary {
+    @apply bg-pink border-pink text-white hover:bg-white hover:text-pink;
+  }
+
+  .fancy-corners {
+    position: relative;
+    background-color: #fff;
+    transform-style: preserve-3d;
+  }
+
+  .fancy-corners:after,
+  .fancy-corners:before {
+    position: absolute;
+    width: 8em;
+    height: 8em;
+    background-size: 100% 100%;
+    background-position: 0 0;
+    transform: translateZ(-1px);
+    z-index: -1;
+    @apply bg-purple;
+  }
+
+  [data-theme="blue"] .fancy-corners:after,
+  [data-theme="blue"] .fancy-corners:before {
+    @apply bg-blue;
+  }
+
+  [data-theme="teal"] .fancy-corners:after,
+  [data-theme="teal"] .fancy-corners:before {
+    @apply bg-teal;
+  }
+
+  .fancy-corners[class*="--bottom"]:after,
+  .fancy-corners[class*="--top"]:before {
+    content: "";
+  }
+
+  .fancy-corners--large[class*="--top"]:before {
+    top: -2.05882em;
+  }
+
+  .fancy-corners--large[class*="--bottom"]:after {
+    bottom: -2.05882em;
+  }
+
+  .fancy-corners--large[class*="--bottom"][class*="--bottom-right"]:after {
+    right: -2.05882em;
+  }
+
+  .fancy-corners[class*="--bottom"]:after {
+    bottom: -1.17647em;
+  }
+
+  .fancy-corners[class*="--bottom"][class*="--bottom-right"]:after {
+    right: -1.17647em;
+  }
+
+  .fancy-corners[class*="--top"]:before {
+    top: -1.17647em;
+  }
+
+  .fancy-corners[class*="--top"][class*="--top-left"]:before {
+    left: -1.17647em;
+  }
+
+  .fancy-corners--top-left:before {
+    -webkit-mask-image: linear-gradient(-45deg, #fff 85.5%, transparent 0);
+    mask-image: linear-gradient(-45deg, #fff 85.5%, transparent 0);
+  }
+
+  .fancy-corners--bottom-right:after {
+    -webkit-mask-image: linear-gradient(-45deg, transparent 14.5%, #fff 0);
+    mask-image: linear-gradient(-45deg, transparent 14.5%, #fff 0);
+  }
+
+  @screen lg {
+    .fancy-corners--large:after,
+    .fancy-corners--large:before {
+      width: 14em;
+      height: 14em;
+    }
+
+    .fancy-corners--large[class*="--top"][class*="--top-left"]:before {
+      left: -2.05882em;
+    }
+
+    .fancy-corners--large[class*="--top"]:before {
+      top: -2.05882em;
+    }
+
+    .fancy-corners--large[class*="--bottom"]:after {
+      bottom: -2.05882em;
+    }
+
+    .fancy-corners--large[class*="--bottom"][class*="--bottom-right"]:after {
+      right: -2.05882em;
+    }
+  }
+}
+
+@layer utilities {
+  @responsive {
+    .flex-basis-10 {
+      flex-basis: 10%;
+    }
+    .flex-basis-20 {
+      flex-basis: 20%;
+    }
+    .flex-basis-30 {
+      flex-basis: 30%;
+    }
+    .flex-basis-40 {
+      flex-basis: 40%;
+    }
+    .flex-basis-50 {
+      flex-basis: 50%;
+    }
+    .flex-basis-60 {
+      flex-basis: 60%;
+    }
+    .flex-basis-70 {
+      flex-basis: 70%;
+    }
+    .flex-basis-80 {
+      flex-basis: 80%;
+    }
+    .flex-basis-90 {
+      flex-basis: 90%;
+    }
+    .flex-basis-100 {
+      flex-basis: 100%;
+    }
+  }
+}

tailwindcss/inviqa/tailwind.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+  content: ["index.html"],
+
+  theme: {
+    colors: {
+      black: '#333333',
+      blue: '#334982',
+      grey: '#f3f3f3',
+      orange: '#fdb913',
+      pink: '#e40087',
+      purple: '#782b8f',
+      red: '#dd372f',
+      teal: '#00857d',
+      white: '#fff',
+    },
+
+    extend: {},
+  },
+
+  variants: {},
+
+  plugins: [],
+
+  experimental: {
+    applyComplexClasses: true,
+  },
+}