JSFiddle - React, Tailwind, and code Playground

by tomarriola

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unlock Block — Component Preview</title>
<style>
/* ── Site design tokens ── */
:root {
  --csi-black:     #000000;
  --csi-dark-grey: #191919;
  --csi-midgrey:   #bdbdbd;
  --csi-yellow:    #ffff00;
  --csi-white:     #ffffff;
  --btn-radius:    6px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  background: #f0f0f0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  min-height: 100vh;
}

/* Simulate the suspect_grid wrapper so 1/3-width calc works */
.suspect_grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 960px;
}

/* Base card (needed so width inheritance works) */
div.one_evidence {
  width: calc((100% / 3) - 2%);
  position: relative;
  box-sizing: border-box;
  margin: 0 1% 2% 1%;
}

/* ════════════════════════════════════════════════════════
   UNLOCK BLOCK — full component CSS
   ════════════════════════════════════════════════════════ */
div.suspect_grid div.one_evidence.promo {
  background:       #191919;
  background-image: none !important;
  border-top:    none;
  border-bottom: none;
  border-left:   4px solid #ffff00;
  border-right:  none;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         32px 20px 28px;
  text-align:      center;
  color:           #ffffff;
  box-shadow:      0 0 15px rgba(0,0,0,0.3);
}

div.suspect_grid div.one_evidence.promo .lock-icon {
  display:       block;
  width:         50px;
  height:        54px;
  margin:        0 auto 14px;
}

div.suspect_grid div.one_evidence.promo .promo-heading {
  font-size:      0.76rem;
  font-weight:    700;
  letter-spacing: 0.1em;
 ...

CSS

/*
 * CrimeScene.com — Unlock Block Standalone CSS
 * Drop into your theme stylesheet after style.css.
 *
 * Deployment steps:
 *   1. Upload crimescene-pro-banner-900x160.png and
 *      crimescene-edu-banner-900x160.png to:
 *      /wp-content/themes/csi/images/
 *   2. Paste this CSS into your child theme stylesheet.
 *   3. Replace the existing div.one_evidence.promo HTML
 *      with the fragment in csi-unlock-block-fragment.html
 */

/* ── Container ───────────────────────────────────────────────────── */
div.suspect_grid div.one_evidence.promo {
  background:       #191919;
  background-image: none !important;   /* removes caution_tape.png */

  border-top:    none;
  border-bottom: none;
  border-left:   4px solid #ffff00;
  border-right:  none;

  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         32px 20px 28px;
  text-align:      center;
  color:           #ffffff;
  box-shadow:      0 0 15px rgba(0,0,0,0.3);
}

/* ── Inline SVG lock (replaces fa-lock) ──────────────────────────── */
div.suspect_grid div.one_evidence.promo .lock-icon {
  display:       block;
  width:         50px;
  height:        54px;
  margin:        0 auto 14px;
}

/* ── "Unlock All the Evidence" heading ───────────────────────────── */
div.suspect_grid div.one_evidence.promo .promo-heading {
  font-size:      0.76rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          #ffffff;
  margin-bottom:  18px;
}

/* ── Stacked banner images ───────────────────────────────────────── */
div.suspect_grid div.one_evidence.promo div.level_buttons {
  width:           100%;
  display:         flex;
  flex-direction:  column;
  gap:             10px;
  margin-bottom:   20px;
  padding:         0 16px;
  box-sizing:      border-box;
}

div.suspect_grid div.one_evidence.promo div.level_buttons a {
  display:     block;
 ...