JSFiddle - React, Tailwind, and code Playground

by Ozgur Ozer

HTML

<form>
  <input id="state1" type="radio" name="collectionA" checked="checked">
  <input id="state2" type="radio" name="collectionA">
  <div id="view1">
  	<h2>View 1</h2>
    <label for="state2">Go to state 2</label>
  </div>
  <div id="view2">
  	<h2>View 2</h2>
    <label for="state1">Go to state 1</label>
    <div id="network_request"></div>
  </div>
</form>

CSS

input,
  #view1, 
  #view2 {
  	display: none;
  }
  
  div {
  	padding: 5px;
    border: 1px solid black;
  }
  
  label {
  	display: inline-block;
    padding: 5px;
    margin: 5px;
    color: white;
    background-color: blue;
  }
  
  #state1:checked ~ #view1, 
  #state2:checked ~ #view2 {
  	display: block;
  }
  
  #network_request {
  	display: inline;
  	opacity:0;
    height: 1px;
    width: 1px;
  	background-image:url('https://my.network.request?some=information');
  }