Live Code Editor Version 2.0

Hướng dẫn tạo Testimonials với CSS - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        	.main {
				width: 60%;
				margin: auto;
        	}
			.container {
			    border: 2px solid #ccc;
			    background-color: #eee;
			    border-radius: 5px;
			    padding: 16px;
			    margin: 16px 0;
			}

/* Clear floats after containers */
			.container::after {
			    content: "";
			    clear: both;
			    display: table;
			}

.container img {
			    float: left;
			    margin-right: 20px;
			    border-radius: 50%;
			}

.container span {
			    font-size: 20px;
			    margin-right: 15px;
			}

@media (max-width: 500px) {
			  	.container {
			    	text-align: center;
			  	}

.container img {
				    margin: auto;
				    float: none;
				    display: block;
			  	}
			}
        </style>
    </head>
    <body>
		<div class="main">
			<div class="container">
			  	<img src="https://freetuts.net/upload/tut_post/images/2017/08/09/996/demo.png" alt="Avatar" style="width:90px">
				<p><span>Nguyễn Văn A</span> Khách Hàng</p>
				<p>Sản phẩm này rất tuyệt vời!</p>
			</div>

<div class="container">
			  	<img src="https://freetuts.net/upload/tut_post/images/2017/08/09/996/demo.png" alt="Avatar" style="width:90px">
			  	<p><span >Nguyễn Văn B</span> Khách Hàng</p>
			  	<p>Sản phẩm quá tệ!</p>
			</div>  
		</div>
	</body>
</html>