JSFiddle - React, Tailwind, and code Playground

by camnpr

HTML

<div class="jg_box">
			<a href="#"></a>
			<a href="#"></a>
			<a href="#"></a>
			<a href="#"></a>
			<a href="#"></a>
			<a href="#"></a>
			<a href="#"></a>
			<a href="#"></a>
			<a href="#"></a>
		</div>

CSS

*{padding: 0;margin:0;}
			.jg_box{border-top:3px solid #ddd;border-left:3px solid #ddd;width:300px;margin:20px auto;}
			.jg_box:after{clear: both;content:'.';line-height: 0;display: block;visibility:hidden;height: 0;}
			.jg_box a{width:97px;height:62px;float:left;border-bottom:3px solid #ddd;border-right:3px solid #ddd;}
			.jg_box a:hover{border: 3px solid #f00;margin:-3px 0 0 -3px;position:relative;}

JavaScript

// 一淘面试题来啦：使用HTML+CSS实现如图布局，border-width 5px,一个格子大小是50*50,hover时候边框变为红色（兼容IE6+，考虑语义化的结构）。