JSFiddle - React, Tailwind, and code Playground

by Luis Martin

JavaScript

try{
	var checkExist = setInterval(function() {
	if (jQuery("#marginColumn").length >= 1 && jQuery("#innercontent").length >= 1) {          
    	clearInterval(checkExist);
    	runTest();
	}
	}, 100);
} catch (e){
}


function runTest(){

	jQuery("head").append("<style>\
			@media (min-width: 1120px) {\
			.div_logo img{\
				margin-left: 46%;\
				margin-top: 55px;\
			}\
		}\
		@media (min-width: 1000px) and (max-width: 1120px){\
			.div_logo img{\
				margin-top: 55px;\
				position: absolute;\
				right: 0%;\
			}\
		}\
		@media (min-width: 801px) and (max-width: 1000px){\
			.div_logo img{\
				margin-top: 55px;\
				position: absolute;\
				right: 1.7%;\
			}\
		}\
		@media (max-width: 603px){\
			.div_logo_mobile {\
				right: 42px;\
			    position: absolute;\
			    width: 8.3333% !important;\
			}\
		}\
		@media (min-width: 603px) and (max-width: 710px){\
			.div_logo_mobile {\
				right: 26px;\
			    position: absolute;\
			    margin-top: -2%;\
			}\
			.div_logo_mobile2{\
				margin-bottom: 4%;\
			}\
		}\
		@media (min-width: 710px) and (max-width: 800px){\
			.div_logo_mobile {\
				right: 17px;\
			    position: absolute;\
			    margin-top: -2%;\
			}\
			.div_logo_mobile2{\
				margin-bottom: 4%;\
			}\
		}\
	</style>");

/*DESKTOP*/
var html = '<div class="div_logo">\
		<img src="https://www.verti.de/info/testing/CHECK24_Tarifnote.PNG" width="170px" alt="">\
	</div>';

jQuery("#marginColumn").append(html);

/*MOBILE*/

jQuery("#innercontent > .ui-g:eq(2)").addClass("div_logo_mobile2")
jQuery(".div_logo_mobile2 > div:eq(0)").css("width","78.3333%");
jQuery(".div_logo_mobile2 > div:eq(1)").addClass("div_logo_mobile");
jQuery(".div_logo_mobile > div").prepend('<img src="https://www.verti.de/info/testing/CHECK24_Tarifnote.PNG" width="60px" alt="">');


}