adding some hexagon stuff, should be able to do a honeycomb layout with it

src/.phpcs.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<ruleset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="PSR2" xsi:noNamespaceSchemaLocation="vendor/squizlabs/php_codesniffer/src/Standards/PSR2/ruleset.xml">
+    <description>PHP Codesniffer ruleset for this project</description>
+
+    <file>./app/Models</file>
+    <file>./config</file>
+    <file>./database</file>
+    <file>./helpers</file>
+    <file>./lang</file>
+    <file>./resources/views</file>
+    <file>./routes</file>
+
+    <exclude-pattern>*/vendor/*</exclude-pattern>
+
+    <arg name="basepath" value="."/>
+    <arg name="parallel" value="4"/>
+    <arg name="report" value="full"/>
+    <arg name="extensions" value="php"/>
+    <arg name="colors"/>
+    <arg name="no-cache"/>
+    <arg value="nps"/>
+
+    <ini name="memory_limit" value="64M"/>
+
+    <autoload>./vendor/autoload.php</autoload>
+
+    <!-- Don't hide tokenizer exceptions -->
+    <rule ref="Internal.Tokenizer.Exception">
+        <type>error</type>
+    </rule>
+
+    <!-- Include all sniffs in the PSR-2 standard -->
+    <rule ref="PSR2">
+        <exclude name="Generic.Files.LineLength.TooLong"/>
+    </rule>
+</ruleset>

src/resources/css/elements/forms.css

@@ -6,14 +6,19 @@
     @apply uppercase font-semibold text-xs text-zinc-600 dark:text-zinc-300;
 }
 
+input.form-input[type="date"],
+input.form-input[type="datetime-local"],
 input.form-input[type="email"],
+input.form-input[type="month"],
 input.form-input[type="number"],
 input.form-input[type="password"],
 input.form-input[type="search"],
 input.form-input[type="tel"],
 input.form-input[type="text"],
 input.form-input[type="textarea"],
+input.form-input[type="time"],
 input.form-input[type="url"],
+input.form-input[type="week"],
 textarea.form-input {
     @apply relative px-3 py-1 border rounded focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 bg-white dark:bg-indigo-900 text-zinc-900 dark:text-zinc-100 border-stone-300 dark:border-stone-600 shadow dark:shadow-white;
 }

src/resources/css/extends/grid.css

@@ -1,3 +1,24 @@
 .auto-cols-max-fr {
     grid-template-column: max-content 1fr;
 }
+
+.hexagon-container {
+    --s: 150px; /* control the size */
+    --g: 10px; /* control the gap */
+    display: grid;
+    margin: calc(var(--s) + var(--g));
+}
+
+.hexagon-container > .hexagon {
+    grid-area: 1/1;
+    width: var(--s);
+    aspect-ratio: 1.15;
+    object-fit: cover;
+    clip-path: polygon(25% 0%, 75% 0%, 100% 50%,75% 100%,25% 100%,0 50%);
+    /*transform: translate(var(--_x,0),var(--_y,0)) scale(var(--_t,1));*/
+}
+
+.hexagon-container > .hexagon:hover {
+    --_t: 1.2;
+    z-index: 1;
+}

src/tailwind.config.js

@@ -79,6 +79,18 @@ module.exports = {
 
 
         // yellows
+        'mango-tango': {
+          50: '#fefbe8',
+          100: '#fff6c2',
+          200: '#ffeb88',
+          300: '#ffd743',
+          400: '#ffc010',
+          500: '#efa603',
+          600: '#d78400',
+          700: '#a45904',
+          800: '#87450c',
+          900: '#733910',
+        },
 
 
         // greens
@@ -160,6 +172,19 @@ module.exports = {
           900: '#10580f',
         },
 
+        'malachite': {
+          50: '#f1feef',
+          100: '#defeda',
+          200: '#bdfbb7',
+          300: '#89f580',
+          400: '#4ce741',
+          500: '#25cf18',
+          600: '#1bc00f',
+          700: '#16870e',
+          800: '#166a11',
+          900: '#135710',
+        },
+
 
         // teals
         'aquamarine': {
@@ -216,6 +241,32 @@ module.exports = {
 
 
         // blues
+        'catalina-blue': {
+          50: '#ecfaff',
+          100: '#d5f2ff',
+          200: '#b5eaff',
+          300: '#82dfff',
+          400: '#47caff',
+          500: '#1dacff',
+          600: '#058eff',
+          700: '#0076f6',
+          800: '#075ec6',
+          900: '#0a407b',
+        },
+
+        'dodger-blue': {
+          50: '#edf8ff',
+          100: '#d7edff',
+          200: '#b9e1ff',
+          300: '#88d0ff',
+          400: '#50b5ff',
+          500: '#2894ff',
+          600: '#1778ff',
+          700: '#0a5deb',
+          800: '#0f4abe',
+          900: '#134395',
+        },
+
         'fun-blue': {
           50: '#f2f7fd',
           100: '#e4edfa',
@@ -269,6 +320,19 @@ module.exports = {
           900: '#5e357d',
         },
 
+        'purple-heart': {
+          50: '#faf6fe',
+          100: '#f4eafd',
+          200: '#ebd9fb',
+          300: '#dbbbf7',
+          400: '#c58ff1',
+          500: '#ae64e8',
+          600: '#9943da',
+          700: '#8030b9',
+          800: '#6f2d9c',
+          900: '#5b267d',
+        },
+
 
         // pinks
         'mandy': {