JSFiddle - React, Tailwind, and code Playground

by helloworld

HTML

<script src="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">

  <div id="app">
    <v-app>
      <v-container class="success">
      
          <v-row>
            <v-col align-self="center" cols="6">
              <v-card class="pa-3" height="100px">align : start</v-card>
            </v-col>

            <v-col align-self="center" cols="6" offset="3">
              <v-card class="d-flex pa-3 justify-center" height="400px">
                <v-card-title>align : center</v-card-title>
              </v-card>
            </v-col>

            <v-col align-self="end" cols="6" offset="6">
              <v-card class="pa-3 text-end"  height="100px">align : end</v-card>
            </v-col>
          </v-row>
        
      </v-container>
    </v-app>
  </div>

JavaScript

Vue.use(Vuetify);

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})