JSFiddle - React, Tailwind, and code Playground

by Colleen Loustalot

HTML

<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1">Phoenix Participants List</a>

    <div id="accordion-1" class="accordion-section-content">
      <ul>
        <li>Ak-Chin Southern Dunes</li>
        <li>Antelope Hills- North</li>
        <li>Antelope Hills- South</li>
        <li>Arizona Grand Resort</li>
        <li>ASU Karsten</li>
        <li>Augusta Ranch</li>
        <li>Camelback- Ambiente</li>
        <li>Camelback- Padre</li>
        <li>Coldwater Golf Club</li>
        <li>Continental Golf Club</li>
        <li>Continental Country Club</li>
        <li>Copper Canyon Golf CLub</li>
        <li>Coyote Lakes Golf CLub</li>
        <li>Eagle Mountain</li>
        <li>Golf Club at Estrella</li>
        <li>Grayhawk Golf Club- Raptor</li>
        <li>Grayhawk Golf Club- Talon</li>
        <li>Kokopelli</li>
        <li>Legend at Arrowhead</li>
        <li>Lone Tree Golf Club</li>
        <li>Longbow Golf Club</li>
        <li>Lookout Mountain Golf Club</li>
        <li>McDowell Mountain Golf Club</li>
        <li>Palm Valley- Lake</li>
        <li>Papago Golf Course</li>
        <li>Poston Butte Golf Club</li>
        <li>Quintero Golf Club</li>
        <li>Raven Golf Club Phoenix</li>
        <li>San Marcos Golf Resort</li>
        <li>Scottsdale Silverado</li>
        <li>Sedona Golf Resort</li>
        <li>Starfire Golf Club</li>
        <li>Stonecreek Golf Club</li>
        <li>Sunland Springs Village</li>
        <li>Supersitition Springs Village</li>
        <li>Superstition Springs Golf Club</li>
        <li>Talking Stick- North</li>
        <li>Talking Stick- South</li>
        <li>The Phoenician</li>
        <li>The Westin Kierland Resort</li>
        <li>TPC® Scottsdale- Champions</li>
        <li>TPC® Scottsdale- Stadium</li>
        <li>Trilogy at Vistancia</li>
        <li>Troon North- Monument</li>
        <li>Troon North- Pinnacle</li>
        <li>Verrado Golf Club</li>
       ...

CSS

/* @import url('http://example.com/example_style.css'); */
 @import url('//fonts.googleapis.com/css?family=Open+Sans%3A100italic%2C200italic%2C300italic%2C400italic%2C600italic%2C700italic%2C800italic%2C900italic%2C900%2C800%2C700%2C600%2C500%2C400%2C300%2C200%2C100&amp;subset=latin&amp;ver=92f4bfe2122cdca027e6117e11aefa5c');

/**
 * CSS @imports must be at the top of the file.      
 * Add them above this section.                             
 */



/* ==========================================================================
   HS COS Boilerplate v1.5.3                                
   ========================================================================== */

/* This responsive framework is required for all styles. */
{% include "hubspot/styles/responsive/required_base.css" %}
{% include "custom/page/OrcaReport_April2016-theme/OrcaReport_April2016-modules.css" %}
{% include "custom/page/OrcaReport_April2016-theme/OrcaReport_April2016-FontAwesome.css" %} 


/* These includes are optional, but helpful. */
{% include "hubspot/styles/patches/recommended.css" %} 




/* ==========================================================================

   Index:         

  1. BASE STYLES   
    - Variables
    - Macros
    - Base
    - Typography

  2. COS STRUCTURE
    - Structure
    - Header
    - Content
    - Footer

  3. MAIN NAVIGATION
    - Custom Menu Primary
    - Mobile Menu

  4. TEMPLATE MODULE CLASSES
    - Common Template Classes
    - Site Pages
    - Landing Pages
    - System Pages

  5. COS COMPONENTS
    - Blog
    - Forms
    - Buttons

  6. MISCELLANEOUS

  7. MOBILE MEDIA QUERIES
  
  8. ACCORDIONS

   ========================================================================== */








/* ==========================================================================


   1. BASE STYLES                                             


   ========================================================================== */





/*...