<div class="p-8"> <div class="shadow-xl rounded-lg"> <div style="background-image: url('https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260')" class="h-64 bg-gray-200 bg-cover bg-center rounded-t-lg flex items-center justify-center"> <p class="text-white font-bold text-4xl">Profile</p> </div> <div class="bg-white rounded-b-lg px-8"> <div class="relative"> <img class="right-0 w-16 h-16 rounded-full mr-4 shadow-lg absolute -mt-8" src="http://tailwindtemplates.io/wp-content/uploads/2019/03/link.jpg" alt="Avatar of Jonathan Reinink"> </div> <div class="pt-8 pb-8"> <h1 class="text-2xl font-bold text-gray-700">Link</h1> <p class="text-sm text-gray-600">From hyrule</p> <p class="mt-6 text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a sem varius, fringilla sapien at, sollicitudin risus.</p> <div class="flex justify-around mt-8"> <i class="material-icons">chat</i> <i class="material-icons">duo</i> <i class="material-icons">location</i> </div> </div> </div> </div> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter