JSFiddle - React, Tailwind, and code Playground

by Vasil Svetoslavov

HTML

<link rel="stylesheet" href="https://cdn.usebootstrap.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.usebootstrap.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
<div class="container">
  <p></p>
  <div class="btn-toolbar">
    <label class="pull-left align-middle">Orientation: </label>
    <div class="btn-group" data-toggle="buttons">
      <input type="radio" name="orientation" id="portrait" value="PORTRAIT" class="btn-radio" onchange="showActiveOrientation(this)" />
      <label for="portrait" class="btn btn-info btn-xs">
        <i class="fa-solid fa-image-portrait"></i>
      </label>
      <input type="radio" class="btn-radio" name="orientation" id="landscape" value="LANDSCAPE" checked onchange="showActiveOrientation(this)" />
      <label for="landscape" class="btn btn-info btn-xs">
        <i class="fa-solid fa-image"></i>
      </label>
    </div>
  </div>

  <hr />

  <div class="">
    <input type="radio" name="color" id="green" value="green" checked />
    <label for="green" class=""> GREEN </label>
    <input type="radio" name="color" id="blue" value="blue" />
    <label for="blue" class=""> BLUE </label>
  </div>
  <div>
    Active orientation:
    <span class="active-orientation"></span>
  </div>
</div>

CSS

div.btn-group>input.btn-radio:first-child+label {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}

input.btn-radio {
  display: none;
}
input.btn-radio+label {
  color:#fff;
}

input.btn-radio:checked+label {
  /*
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;*/
}
.active-orientation {
  color: #dc3545;
  font-weight: bold;
  font-style: italic;
}
/*
.align-middle {
  margin-top: 2px;
}
*/
 /*
.btn-toolbar {
  border: 1px solid #c9e;
  border-radius: 5px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .3) 0%, rgba(255,3255,255,1) 100%);
  padding: 5px;
  padding-bottom: 0;
}
*/

JavaScript

function activate() {
	$(this).addClass("active").siblings().removeClass("active");
}

function updateActiveOrientationText(textToSet) {
	$('.active-orientation').text(textToSet);
}
function showActiveOrientation(activeElement) {
	updateActiveOrientationText($(activeElement).val());
  $('input[name="orientation"]+label').each(function(idx, el) {
  	console.log('IDX: ' + idx);
    console.log(el.id + $(el).attr('for'));
  });
  $('input[name="orientation"]+label').removeClass('active');
  console.log(activeElement.id);
  $('#' + activeElement.id + '+label').addClass('active');
}

function initActiveOrientation() {
	var activeRadio = $('input.btn-radio:checked');
  if (activeRadio.length > 0) {
  	showActiveOrientation(activeRadio.get(0));
  } else {
  	updateActiveOrientationText('nothing selected...');
  }
}

$(document).ready(function() {
	initActiveOrientation();
});