JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script>
<form name="myform" id="myform">
  <div class="form-group">
  <input type="text" name="searchbar" value="" class="form-control" placeholder="Was suchst Du ?" >
  </div>
<div style="text-align: center;">
<fieldset name="radiogroup">
  <label class="custom-control custom-radio">
    <input type="radio" name="radio" class="custom-control-input" value="google" checked>
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description"><i class="fa fa-google fa-lg fa-fw" aria-hidden="true"></i> </span>
  </label>
  <label class="custom-control custom-radio">
    <input type="radio" name="radio" class="custom-control-input" value="googleimage" >
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description"><i class="fa fa-picture-o fa-lg fa-fw" aria-hidden="true"></i></span>
  </label>
</fieldset>
</div>
</form>
<p>Console:</p>
<ul id="console"></ul>

CSS

body { padding-top: 5rem; }

@import 'https://fonts.googleapis.com/css?family=Source+Code+Pro|Ubuntu+Mono';

#console {
  padding: 15px;
  background-color: #373a3c;
  color: #fff;
  /*font-family: Monaco,Consolas,"Liberation Mono","Courier New",monospace;*/
  font-family: "Source Code Pro", "Ubuntu Mono";
}

#console li {
  padding: 0px;
  display: block;
  
}

#console li:before {
    /*Using a Bootstrap glyphicon as the bullet point*/
    content: "\f120\00a0";
    font-family: 'FontAwesome';
    margin-top: 2px;
    color: #fff;
}

JavaScript

jQuery(document).ready(function($){
var suche = $("input[name = 'radio']:checked").val();
  $("input[name = 'radio']").on("click", function () {
  		var suche = $("input[name = 'radio']:checked").val();
      $('<li />', {html: 'selected: '+ suche}).appendTo('#console');
  });
  $('<li />', {html: 'Document Ready'}).appendTo('#console');
});