JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<div style="margin-top: 10px;"> 
  <button type="button" class="btn btn-primary">Training</button><br>
  <button type="button" class="btn btn-info">Goal Setting</button><br>
  <button type="button" class="btn btn-success">Race Results</button><br>
  <button type="button" class="btn btn-info">Nutrition</button><br>
  <button type="button" class="btn btn-warning">Mobile Friendly</button><br>
  <button type="button" class="btn btn-danger">Media</button><br>
  <button type="button" class="btn btn-primary">Statistics</button><br>
  <button type="button" class="btn btn-info">Personal Logs</button><br>   
  <button type="button" class="btn btn-success">Fitness Manager</button>
</div>

<div class="data_target" style="margin: 10px;">
To view some of the functionality of each feature, click on the button for that feature.
</div>

CSS

button { width: 140px; }

JavaScript

$(document).ready(function() {
    // Now the document is ready, you can do your stuff!
    $('button').click(function(e) {
        $('.data_target').text('some text goes here');
    });
});