JSFiddle - React, Tailwind, and code Playground

by Die_Dori

HTML

<div id="maincontent">

<!-- Dropdown-Menue -->
<div class="accordion">
<div class="single-accordion1">

<h2>MenĂĽ</h2>
	<!-- 1 -->
	<label for="rbcontent1" style="cursor:pointer;">
  Inhalt1</label>

	<br>

	<!-- 2 -->
	<label for="rbcontent2" style="cursor:pointer;">
  Inhalt2</label>
</div>
</div>

<section id="content">

<!-- Startseite -->
    <input class="rbcontent" id="rbcontent0" type="radio" name="rbcontent" checked>
    <div id="contentstart" class="content">Startseite</div>

<!-- Inhalt1 -->
    <input class="rbcontent" id="rbcontent1" type="radio" name="rbcontent">
    <div id="content1" class="content">1</div>
    
<!-- Inhalt2 -->
    <input class="rbcontent" id="rbcontent2" type="radio" name="rbcontent">
    <div id="content2" class="content">2</div>

CSS

body {
background-color:#00538c;}

#maincontent {
background-color: #fff;
width: 800px;
height: 550px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: auto;
border: 1px solid;
border-color: #ffffff;
border-radius: 30px;}
	
/* Navigation */
.accordion {
width: 400px;
padding: 3px;
position: relative;
margin-left:15px;
margin-top: 30px;
z-index: 2;}

.single-accordion1 {
height: 55px;
width: 75px;
overflow: hidden;
background: #dddddd;
padding: 0px 20px;
-webkit-transition: all 0.2s; /* Safari */
transition: all 0.2s;}

.single-accordion1:hover {				
height: 150px;			
width: 100px;			
border-radius: 30px;				
background: #a5e0ff;				
-webkit-transition: all 0.2s; /* Safari */				
transition: all 0.2s;				
cursor: pointer;}
				
.single-accordion1 h2{				
color: #00a0f5;				
font-size: 30px;				
line-height: 9px;}
					
/* unvisited link */
a:link {
color: red;    
text-decoration: none;}

/* visited link */
a:visited {   
color: red;    
text-decoration: none;}

/* mouse over link */
a:hover {    
color: white;    
text-decoration: none;}

/* selected link */
a:active {   
color: white;   
text-decoration: none;}

/*----------------------------------------------------*/

/* content allgemein */
.content {
    position: relative;}

#content {
    width: 600px;
    height: 520px;
    background-color: #ccc;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font-family: Verdana;				
	  font-size: 20px;
    position: absolute; bottom: 18px; right: 10px;}

#content > div {
    padding: 10px;
    display: none;}

#content div:target {
    display: block;
    position: relative;}

#contentstart {
    width: 490px;
    height: 490px;
	  border: 1px solid;
	  margin: auto;
	  position relative;}

#content1 {
    width: 490px;
    height: 490px;
	  border: 1px solid;
	  margin: auto;
	  position relative;}

#content2 {
    width: 490px;
    height: 490px;
	  border: 1px solid;
	  margin: auto;}
  
.rbcontent {
...