JSFiddle - React, Tailwind, and code Playground

by tomarriola

HTML

<!-- Wrapper matching your site's content container limits -->
<div class="container black" style="padding: 4rem 1rem; margin: 0 auto; max-width: 1200px;">
  
  <!-- Section Title using your native theme's orange case headers -->
  <div style="text-align: center; margin-bottom: 3.5rem;">
    <h2 class="case_title" style="font-size: 2.25rem; font-weight: 800; text-transform: uppercase; color: var(--csi-case-header); margin-bottom: 0.5rem;">
      Case Tutorials
    </h2>
    <p style="color: #a1a1aa; font-size: 1.1rem; max-width: 600px; margin: 0 auto;">
      Review these visual training guides to master forensic evidence collection techniques.
    </p>
  </div>

  <!-- Three-Column Layout utilizing your theme's flex container and wrap classes -->
  <div class="flex_container flex_wrap" style="gap: 2rem; justify-content: space-between;">
    
    <!-- Card 1 -->
    <div style="flex: 1 1 300px; background-color: #191919; border: 1px solid #2d2d2d; border-radius: var(--button-radius); overflow: hidden; display: flex; flex-direction: column;">
      <!-- Aspect ratio container for your JWPlayer plugin shortcode -->
      <div style="position: relative; width: 100%; padding-top: 56.25%; background: #000;">
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff;">
          [jw-1]
        </div>
      </div>
      <!-- Text & Interactive Copy -->
      <div style="padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between;">
        <div>
          <span style="font-size: 0.75rem; font-weight: 700; color: var(--csi-case-header); text-transform: uppercase; letter-spacing: 1px;">Part 01</span>
          <h3 style="font-size: 1.25rem; font-weight: 700; color: #ffffff; margin: 0.5rem 0; text-transform: uppercase;">Dusting for Prints</h3>
          <p style="font-size: 0.875rem; color: #a1a1aa;...