JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container-fluid" x-data="{
  planet: {
    name: 'Mercury',
    distance:1000,
    size: 100
  }
}">
  <section class="py-3 planet">
    <div class="row">
      <div class="col-12">
        <h4 class="text-center" x-text="planet.name"></h4>
      </div>
    </div>
    <div class="d-flex justify-content-between align-items-center">
      <div class="earth"></div>
      <div class="flex-fill">
        <input name="speed" type="range" min="0" max="1000" step="1" value="1" data-distance="67410000" @change="console.log($event.target.value);" />
      </div>
      <div class="mars"></div>
    </div>
  </section>
</div>