JSFiddle - React, Tailwind, and code Playground

by TheNerdy97

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<style>
.myModalLabel{margin:0;line-height:1.5; text-align:center;}
</style>
  </head>
  <body>

    
<div class="text-center">
    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-center" data-bs-toggle="modal" data-bs-target="#FaqsModal">
  Launch demo modal
</button>
</div>





 <div class="modal fade" id="FaqsModal" tabindex="-1" aria-labelledby="FaqsModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="FaqsModalLabel">FAQS</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="accordion" id="accordionFaqs">

      </div>
    </div>
  </div>
</div>
</div>





      <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
        <input type="radio" class="btn-check" value="fresh" name="btnradio" id="FreshBTN" autocomplete="off" checked>
        <label class="btn btn-outline-success" for="FreshBTN">Fresh</label>
        <input type="radio" class="btn-check" value="orb" name="btnradio" id="OrbBTN" autocomplete="off">
        <label class="btn btn-outline-success" for="OrbBTN">Orb</label>
       ...

CSS

ul {
	list-style-type: none;
	}
	
	li {
	display: inline-block;
	
	}
	
	input[type="checkbox"] {
	display: none;
	}
	
	/* label {
	border: 1px solid #fff;
	padding: 10px;
	display: block;
	position: relative;
	margin: 10px;
	cursor: pointer;
	} */
	
	label:before {
	background-color: white;
	color: white;
	content: " ";
	display: block;
	border-radius: 50%;
	border: 1px solid grey;
	position: absolute;
	top: -5px;
	left: -5px;
	width: 25px;
	height: 25px;
	text-align: center;
	line-height: 28px;
	transition-duration: 0.4s;
	transform: scale(0);
	}
	
	label img {
	opacity:50%;
	width: 64px;
	height: 64px;
	margin: -20px;
	margin-bottom: -15px;
	margin-top: 4px;
	
	
	}
	
	:checked + label {
	border:2px;
	border-color:black;
	
	  
	
	}
	
	
	
	:checked + label img {
  
	/* box-shadow: 0 0 5px #333; */
	z-index: -1;
	opacity:100%;
	width: 64px;
	height: 64px;
	border: 1px solid;
	margin: -20px;
	margin-bottom: -15px;
	margin-top: 4px;
  
	
	}

JavaScript

const faqs = [
{
	id: "QuestionOne",
	heading:"HeaderOne",
  Question: "How are the accounts played?",
  Answer: "All the accounts listed in this site are played using bots that can automatically log in, receive gifts, do quests, augment, summon etc."
},
{
 id: "QuestionTwo",
 heading: "HeadTwo",
 Question: "Are there in-game pics?",
 Answer: "Unfortunately, no but I have something that may be equal or could even be better for you when making a decision to buy an account. You can see what the minium amount of items each account types have, you can only get more and never less, if there is an account with less items than shown you will get an estimated refund for the amount of the items."
},
{
 id:"QuestionThree",
 heading: "HeadThree",
 Question: "Are any of the accounts linked to an existing KLab ID?",
 Answer: "All the accounts I'm selling are not linked and have never been linked to any KLab ID."
},
{
 id: "QuestionFour",
 heading: "HeadingFour",
 Question: "Are the accounts updated constantly?",
 Answer: "Yes, you can also see when an account has been updated."

}

]


    $(document).ready(function() {
        $('#FreshBTN,#OrbBTN,#FarmedBTN').click(function() {
           var type = ($(this).attr("value"));
           console.log(type)
          		if (type =="fresh"){
                	$('#accountsTable').DataTable().ajax.url('api/' + type + '/?format=datatables').load();
        }
        			else if (type == "orb") {
        					$('#accountsTable').DataTable().ajax.url('api/' + type + '/?format=datatables').load();
        }
        			else if (type == "farmed") {
        					$('#accountsTable').DataTable().ajax.url('api/' + type + '/?format=datatables').load();
        }
        });

    });

$(document).ready(function() {
  for (var i in faqs) {
    $('#accordionFaqs')
      .append(`
          <div class="accordion-item">
    <h2 class="accordion-header" id="${faqs[i].heading}">
      <button class="accordion-button" type="button"...