Building an Interactive Hex Grid with Tailwind & Vanilla JS (No Frameworks Required) 🐝

👋 Hey Devs!
Last week, I introduced my side project, Blue Hive Guide, a resource site for the game Bee Swarm Simulator.
Today, I want to share how I built the core feature of the site: The Interactive Hive Composition Grid, using zero frameworks—just HTML, Tailwind CSS, and a sprinkle of Vanilla JS.

1. The Challenge: Hexagons are Hard 🛑 The game uses a honeycomb layout. I needed a way to display 50 bees in a hexagonal grid that: Looked like the game. Was responsive (mobile-friendly). Was clickable (to show meta stats).
2. The Solution: CSS Grid + Clip-Path 🎨 Instead of using complex SVGs or heavy libraries, I used CSS clip-path to shape standard divs into hexagons. The HTML Structure: I treated the hive as a simple grid. HTML

<div class="hive-grid grid-cols-7 gap-2">
  <!-- A single bee slot -->
  <div class="hive-slot slot-blue" 
       data-name="Buoyant Bee"
       data-mutation="Convert Rate %">
       Buoy
  </div>
  <!-- ... 49 more slots -->
</div>

CSS

.hive-slot {
  aspect-ratio: 1;
  /* The Hexagon Shape */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.hive-slot:hover {
  transform: scale(1.1); /* Nice hover effect */
}

👉 See it in action here:

1. Handling Data without a Database 💾 Since this is a static site (deployed for speed), I didn't want a backend just to store bee stats. I used HTML5 data- attributes to store the metadata directly in the DOM. When a user clicks a bee, a simple JS function reads these attributes and populates a Modal. JavaScript

function openBeeDetail(element) {
    // 1. Get data from the clicked HTML element
    const name = element.getAttribute('data-name');
    const mutation = element.getAttribute('data-mutation');

    // 2. Inject into the Modal
    document.getElementById('modalName').innerText = name;
    document.getElementById('modalMutation').innerText = mutation;

    // 3. Show Modal
    document.getElementById('beeModal').classList.remove('hidden');
}

It's simple, blazing fast, and requires zero API calls.

1. Improving UX: The "Copy-Paste" Tool 🛠️ Another pain point for players is setting up their "Natro Macro" (automation software). It requires specific JSON settings. On my Macro Settings Page, I added a code block with a one-click copy button. It’s a small detail, but it saves users from typing errors.
2. Current Progress & SEO 📈 Since launching, I've expanded the site structure to cover all bases: SSA Stats: A guide on amulet probability. Transition Guide: For early-game players. Google Search Console is showing steady growth (300+ daily impressions), proving that niche static sites are still very viable in 2026. 🙏 Feedback Request I'm currently optimizing the Mobile View of the Hex Grid. If you check it on your phone, does the spacing feel too tight? Check it out Thanks for following my journey!