JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<div class="button-english">English</div>
<div class="button-german">German</div>

<div style="clear:both;"></div>

<div class="header">
    <div class="english"></div>
    <div class="german"></div>
</div>

<div class="field a">
    <div class="english">Book a Voucher</div>
    <div class="german">Buchen Sie einen Gutschein</div>
</div>

<div class="field b">
    <div class="english">Learn to Skydive</div>
    <div class="german">Lernen Sie, Skydive</div>
</div>

<div class="field c">
    <div class="english">Book a Skydive</div>
    <div class="german">Buchen Sie ein Skydive</div>
</div>

CSS

.button-english, .button-german {
    background-color: #e8e8e8;
    padding:10px;
    width: 100px;
    text-align: center;
    clear:both;
    cursor:pointer;
    position:relative;
    margin-bottom:5px;
}

.header { 
    width: 664px;
    border: 1px solid red;
    height:200px;
    margin-bottom:30px;
    margin-top:30px;
}

.field {
    float:left;
    width:200px;
    border: 1px solid red;
    height:200px;
}

.a {
    
}

.b {
    margin-left: 30px;
}

.c {
    margin-left: 30px;
}

JavaScript

$( ".german" ).hide();

$( ".button-german" ).click(function() {
  $( ".english" ).hide( "fast", function() {
    $( ".german" ).show("fast");
  });
});

$( ".button-english" ).click(function() {
  $( ".german" ).hide( "fast", function() {
    $( ".english" ).show("fast");
  });
});