JSFiddle - React, Tailwind, and code Playground

by raymondralibi

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css">
<script src="//fonts.googleapis.com/icon?family=Material+Icons"></script>
<script src="https://cdn.rawgit.com/ralibi/fbe40dd76d413cbbf086c209ce4680f9/raw/23de057b47b52d78e257d0a1ee62454bf608cfee/jj-component.js"></script>
<div id="app">
  <!-- JjLogo that scale with the viewport -->
  <div class="logo-viewport">
    <jj-logo/>
  </div>

  <!-- JjAvatar -->
  <jj-avatar src="https://api.adorable.io/avatars/face/eyes7/nose2/mouth5/cb9780"></jj-avatar>

  <!-- JjStatement with default mode -->
  <jj-statement 
    statement="Heterosomous tergeminous euxenite parliamentarism codamine." 
    verdict="IN_PROGRESS" 
    :promise-maker="{full_name: 'Arlen Phanco'}"
  >
  </jj-statement>

  <!-- JjStatement with mode `full` -->
  <jj-statement 
    mode="full"
    statement="Monotriglyph gentlemanly interalveolar virous pneumotropic inexpress gorillaship sideromagnetic, ossuary silt unshamefulness." 
    verdict="NOT_RATED" 
    :promise-maker="{full_name: 'Sammie Roider', position: 'Dinmont of Synenergistical', avatar_url: 'https://api.adorable.io/avatars/face/eyes1/nose6/mouth5/dba770'}"
  >
  </jj-statement>
  
  <!-- JjVote with position `center` -->
  <jj-vote
    :votes="27"
    :voted="true"
    position="center"
  >
  </jj-vote>
  
  <!-- JjVote with voted `false` -->
  <jj-vote
    :votes="5"
    :voted="false"
  >
  </jj-vote>
  
  <!-- JjNewsItem -->
  <jj-news-item
    author="Jessika Reyman"
    title="Extraterrestrial ectozoa uncharitableness ot unhumbugged veridic causticizer bipedal"
    url="http://github.com"
    url-to-image="https://static.pexels.com/photos/160097/pexels-photo-160097.jpeg"
    published-at="08-09-2017"
    :tags="['nature', 'amusement']"
  >
  </jj-news-item>
  
  
</div>

SCSS

@import url(//fonts.googleapis.com/icon?family=Material+Icons);

#app {
  padding: 20px;
}

.logo-viewport {
  width: 64px;
  margin: auto;
  margin-bottom: 20px;
}

.jjc-avatar, 
.jjc-statement, 
.jjc-vote, 
.jjc-news-item {
  margin-bottom: 20px;
}

JavaScript

Vue.use(JjComponent)
new Vue({ el: '#app' })