1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="app" class="min-h-screen bg-gray-300 dark:bg-gray-600 py-6 flex flex-col sm:py-12 space-y-4">
<div v-for="(post, index) in posts" :key="index" class="max-w-2xl px-8 py-4 mx-auto bg-white rounded-lg shadow-md dark:bg-gray-800">
<div class="flex items-center justify-between">
<span class="text-sm font-light text-gray-600 dark:text-gray-400">Mar 10, 2019</span>
<a class="px-3 py-1 text-sm font-bold text-gray-100 transition-colors duration-200 transform bg-gray-600 rounded cursor-pointer hover:bg-gray-500">Design</a>
</div>
<div class="mt-2">
<a href="#" class="text-2xl font-bold text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-200 hover:underline text-capitalize" v-text="post.title"></a>
<p class="mt-2 text-gray-600 dark:text-gray-300" v-text="post.body"></p>
</div>
<div class="flex items-center justify-between mt-4">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Read more</a>
<div class="flex items-center">
<img class="hidden object-cover w-10 h-10 mx-4 rounded-full sm:block" :src="post.avatar" alt="avatar">
<a class="font-bold text-gray-700 cursor-pointer dark:text-gray-200" v-text="post.name"></a>
</div>
</div>
</div>
</div>
Enter to Rename, Shift+Enter to Preview