JSFiddle - React, Tailwind, and code Playground

HTML

<div class="catalog-items">
			<div class="catalog-iteam">
				<div class="flag flag-new">NEW</div>
				<div class="actions">
					<a href="#" class="buy">Купить</a>
					<a href="#" class="bookmark">В закладки</a>
				</div>
				<div class="image"> 
					<img width="218px" height="168px" src="http://i68.fastpic.ru/big/2014/0718/94/d569d33e08323a61c8bb1a5431d4b694.jpg">
				</div>
				
			</div>

CSS

.catalog-items{
	width:270px;
	margin:20px auto;
}
.catalog-iteam{
	position: relative;
	display: inline-block;
	width: 218px;
	margin-right: 20px;
	margin-bottom: 20px;
	border:1px solid #ccc;
	line-height: 20px;
	font-weight: bold;
	text-align: center;
    
    overflow: hidden;
}
.catalog-iteam .flag{
	position: absolute;
	/*top: 0px;*/
	/*right: 0px;*/
	/*width: 59px;*/
	/*height: 58px;*/
	/*text-indent: -1000px;*/
	/*overflow: hidden;*/
	z-index: 20;
    
    /*=========Добавленые мною свойства=======*/
    display: inline-block;
    width: 100px;
    height: 27px;
    top: 14px;
    right: -50px; /*равен половине ширины элемента*/
    font-size: 70%;
    text-align: center;
    line-height: 27px; /*равно высоте элемента*/
    color: white;
    background: red;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: 50% -15px; /*значение по Y (-15px) равно свойству top элемента*/
}

/*т.к. элемент уже сделан CSSом - бэкграунд не нужен:*/

/*.catalog-iteam .flag-new{
	background:url(http://i67.fastpic.ru/big/2014/0718/d9/303acc0e9ae9bf66fff479ba5de020d9.png) no-repeat 0 0;
}*/


.catalog-iteam .actions{
	display: none;
}
.catalog-iteam .image{
	width:218px; 
	height:168px;
	overflow: hidden;
	margin:0 auto;
	
	
}