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

刘泽宇 — Sat, 24 Jan 2026 12:29:58 +0000

👋 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.

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).
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:

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.

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.
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!

I built a niche gaming tool in 3 days: My journey building an interactive Blue Hive Guide 🐝

刘泽宇 — Wed, 21 Jan 2026 08:15:42 +0000

👋 Hi DEV Community!
I'm a solo developer and recently, I've been obsessing over a Roblox game called Bee Swarm Simulator (I know, I know, but the mechanics are surprisingly deep!).

The Problem 🛑 While playing, I reached the "endgame" phase where everyone switches to a specific build called the "Blue Hive". The problem? The information was scattered everywhere: 20-minute YouTube videos just to show one image. Discord messages that get lost. Messy Reddit threads from 2 years ago. There was no clean, interactive, web-based guide that told you exactly which bee to put where and what stats (mutations) they needed.
The Solution 🛠️ So, I decided to build it myself. I wanted to create a site that acts as a "second monitor" tool for players while they macro (AFK farm). My goal was simple: Zero bloat (Load instantly). Visual-first (The Hive Composition). Interactive (Click a bee -> see the meta stats). The Tech Stack: I kept it super simple because I wanted to ship fast: HTML5 (Semantic structure for SEO). Tailwind CSS (For that clean, gamified UI style). Vanilla JavaScript (For the interactive modals).
Key Feature: The Interactive Hive Grid 🧩 The core of the site is the 50-bee slot layout. I used CSS Grid to create the honeycomb shape and added a data- attribute system to store the metadata (Mutations, Beequips, Roles) for each bee.

<!-- Example of how I handled the data -->
<div class="hive-slot slot-blue" 
     onclick="openBeeDetail(this)"
     data-name="Buoyant Bee"
     data-mutation="Convert Rate %">
     Buoy
</div>

When a user clicks a slot, a modal pops up with the exact 2026 meta build info. No more pausing videos!

Early Results 📈 I launched the site Blue Hive Guide just 3 days ago. Without any paid ads, just by optimizing for SEO keywords like "Blue Hive Build 2026", the site is already seeing: 300+ Impressions daily on GSC. 13% CTR (It seems players were really hungry for this!).
What's Next? 🚀 I'm currently working on adding a Macro Settings Generator and expanding the guide for Red/White hives. I'd love to hear your feedback! How does the UI feel? (I tried to match the game's aesthetic). Any tips for optimizing vanilla JS modals? Thanks for reading my little journey!

Live demo

Forem: 刘泽宇

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

I built a niche gaming tool in 3 days: My journey building an interactive Blue Hive Guide 🐝