JSFiddle - React, Tailwind, and code Playground

by Tony Frost

HTML

<!--Sir Xiradorn Responsive Logo-->
<div class="xir-responsive-logo"><a href="{U_INDEX}" title="{L_INDEX}"></a></div>

CSS

/**																		 */
/*	Sir Xiradorn Customize Global 										 */
/*	CSS per la personalizzazione dello stile senza modifiche dirette 	 */
/*																		 */
/** Personalizzazione Logo con CSS3 - for modern browsing */
.xir-responsive-logo {
  background-image: url("http://s28.postimg.org/8mtheri3f/logo.jpg");
  background-color: #132332;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  border-radius: 15px;
  box-shadow: 0 0 0 1px lightgray;
  display: block;
  height: 100px;
  margin: 10px auto;
  overflow: hidden;
  width: 100%;
}
@media (max-width: 780px) {
  .xir-responsive-logo {
    height: 65px;
    transition: all 500ms ease;
  }
}
@media (max-width: 580px) {
  .xir-responsive-logo {
    height: 50px;
    transition: all 500ms ease;
  }
}
@media (max-width: 380px) {
  .xir-responsive-logo {
    height: 35px;
    transition: all 500ms ease;
  }
}
.xir-responsive-logo a {
  width: 100%;
  display: block;
  height: 120px;
}