timeline2.vue

<template>
  <v-app>
    <v-content>
      <v-container class="pa-5" style="max-width: 600px;">
        <v-timeline dense clipped>
          <v-timeline-item color="orange">
            <v-text-field
              label="Leave a comment..."
              solo
              hide-details
            >
              <template slot="append">
                <v-icon>mdi-emoticon-happy</v-icon>
                <v-icon class="ml-2">mdi-at</v-icon>
                <v-icon class="ml-2">mdi-pound</v-icon>
                <v-icon class="ml-2">mdi-paperclip</v-icon>
                <v-btn
                  depressed
                  class="text-capitalize"
                  color="grey lighten-2"
                >
                  Post
                </v-btn>
              </template>
            </v-text-field>
          </v-timeline-item>
          <div class="ml-5 pl-3 mt-5 mb-5 text-uppercase">Today</div>
          <v-timeline-item small color="grey">
            <v-layout>
              <v-flex xs9>
                Order confirmation email was sent to John Leider ([email protected]).
              </v-flex>
              <v-flex xs3 text-xs-right grey--text font-weight-light>
                10:31pm EDT
              </v-flex>
            </v-layout>
          </v-timeline-item>
          <div class="ml-5 pl-3 mt-5 mb-5 text-uppercase">
            <v-btn color="blue" class="ma-0" outline>Resend email</v-btn>
          </div>
          <v-timeline-item small>
            <v-layout>
              <v-flex xs9>
                <v-chip small label color="purple" class="white--text">APP</v-chip> A $9.22 USD payment was processed on PayPal Express Checkout.
              </v-flex>
              <v-flex xs3 text-xs-right grey--text font-weight-light>
                10:31pm EDT
              </v-flex>
            </v-layout>
          </v-timeline-item>
          <v-timeline-item color="grey" small>
            <v-layout>
              <v-flex xs9>
                John Leider placed this order on Online Store (checkout #193512354221).
              </v-flex>
              <v-flex xs3 text-xs-right grey--text font-weight-light>
                10:31pm EDT
              </v-flex>
            </v-layout>
          </v-timeline-item>
        </v-timeline>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      //
    })
  }
</script>