curder · November 11, 2018 12:22
diff --git a/card.html b/card.html
 <!doctype html>
 <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Card</title>
        <link href="https://cdn.bootcss.com/tailwindcss/0.7.0/tailwind.min.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <style>
            html,body {
                height: 100%;
            }
            body{
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .card {
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
                width: 475px;
                height: 258px;
            }
            .card-left {
                background: linear-gradient(to bottom, #21c8f6, #637bff);
            }
        </style>
    </head>
    <body>
        <div class="card flex">
            <div class="card-left px-6 py-6 rounded-l text-center flex justify-between flex-col items-center text-white">
                <a href="#" class="block text-white no-underline uppercase rounded-full py-1 px-4 bg-grey-dark hover:bg-grey-darker">php</a>
                <img src="https://laracasts.com/images/series/2018/the-php-practitioner.svg" alt="">
                <span class="block font-semibold">Intermediate Difficlty</span>
            </div>
            <div class="card-right flex flex-col px-6 py-6 rounded-r">
                <h2 class="mb-4"><a href="#" class="no-underline font-normal text-black font-medium hover:text-grey-darker">PHP is an Programe</a></h2>
                <p class="text-grey-dark flex-1 font-light text-lg mb-6">There's no two ways about it: Let's fix that! Bit by bit, We'll break all of these confusing concepts down as best as we can. </p>
                <div class="flex text-grey-dark">
                    <div><i class="fa fa-book"></i><span class="mx-2">5 Lessons</span></div>
                    <div class="ml-2"><i class="fa fa-clock-o"></i><span class="ml-2">53:10 min</span></div>
                </div>
            </div>
        </div>
    </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Card</title>
	<link href="https://cdn.bootcss.com/tailwindcss/0.7.0/tailwind.min.css" rel="stylesheet">
	<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<style>
	html,body {
	height: 100%;
	}
	body{
	display: flex;
	align-items: center;
	justify-content: center;
	}
	.card {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
	width: 475px;
	height: 258px;
	}
	.card-left {
	background: linear-gradient(to bottom, #21c8f6, #637bff);
	}
	</style>
	</head>
	<body>
	<div class="card flex">
	<div class="card-left px-6 py-6 rounded-l text-center flex justify-between flex-col items-center text-white">
	<a href="#" class="block text-white no-underline uppercase rounded-full py-1 px-4 bg-grey-dark hover:bg-grey-darker">php</a>
	<img src="https://laracasts.com/images/series/2018/the-php-practitioner.svg" alt="">
	<span class="block font-semibold">Intermediate Difficlty</span>
	</div>
	<div class="card-right flex flex-col px-6 py-6 rounded-r">
	<h2 class="mb-4"><a href="#" class="no-underline font-normal text-black font-medium hover:text-grey-darker">PHP is an Programe</a></h2>
	<p class="text-grey-dark flex-1 font-light text-lg mb-6">There's no two ways about it: Let's fix that! Bit by bit, We'll break all of these confusing concepts down as best as we can. </p>
	<div class="flex text-grey-dark">
	<div><i class="fa fa-book"></i><span class="mx-2">5 Lessons</span></div>
	<div class="ml-2"><i class="fa fa-clock-o"></i><span class="ml-2">53:10 min</span></div>
	</div>
	</div>
	</div>
	</body>
	</html>