JSFiddle - React, Tailwind, and code Playground

by deathstalkersid

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <body>
    <div id="tabbed-content" class="container">
      <div class="row justify-content-center">
        <div class="col-12 col-md-9">
          <div class="tab-content" id="propertyTabImages">
            <div class="tab-pane fade show active contact-content" id="contact-content-image" role="tabpanel" aria-labelledby="contact-tab">
              Contact image here
            </div>
            <div class="tab-pane fade facts-content" id="facts-content-image" role="tabpanel" aria-labelledby="facts-tab">
              Facts image here
            </div>
            <div class="tab-pane fade plans-content" id="plans-content-image" role="tabpanel" aria-labelledby="plans-tab">
              Plans image here
            </div>
            <div class="tab-pane fade news-content" id="news-content-image" role="tabpanel" aria-labelledby="news-tab">
              News image here
            </div>
          </div>

          <ul class="nav nav-tabs justify-content-center" id="propertyTab" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-content, #contact-content-image" type="button" role="tab" aria-controls="contact" aria-selected="true">Contact</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="facts-tab" data-bs-toggle="tab" data-bs-target=".facts-content, #facts-content-image" type="button" role="tab" aria-controls="facts" aria-selected="false">Property Facts</button>
            </li>
            <li class="nav-item" role="presentation">
        ...