JSFiddle - React, Tailwind, and code Playground

by zl3439

HTML

<?php 
/* Add Center Widget to Header */
genesis_register_sidebar( array(
	'id'          => 'header-center',
	'name'        => __( 'Header - Center', 'outreach' ),
	'description' => __( 'This is the center section of the Header.', 'outreach' ),
) );
function themeprefix_genesis_do_header() {
	global $wp_registered_sidebars;
	genesis_markup( array(
		'html5'   => '<div %s>',
		'xhtml'   => '<div id="title-area">',
		'context' => 'title-area',
	) );
	do_action( 'genesis_site_title' );
	do_action( 'genesis_site_description' );
	echo '</div>';
	genesis_widget_area( 'header-center', array(
	'before' => '<aside class="header-middle widget-area header-widget-area">',
	'after'  => '</aside>',
	) );
	if ( ( isset( $wp_registered_sidebars['header-right'] ) && is_active_sidebar( 'header-right' ) ) || has_action( 'genesis_header_right' ) ) {
		genesis_markup( array(
			'html5'   => '<aside %s>',
			'xhtml'   => '<div class="widget-area header-widget-area">',
			'context' => 'header-widget-area',
		) );
		do_action( 'genesis_header_right' );
		add_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
		add_filter( 'wp_nav_menu', 'genesis_header_menu_wrap' );
		dynamic_sidebar( 'header-right' );
		remove_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
		remove_filter( 'wp_nav_menu', 'genesis_header_menu_wrap' );
		genesis_markup( array(
			'html5' => '</aside>',
			'xhtml' => '</div>',
		) );
	}
}
remove_action( 'genesis_header','genesis_do_header' );
add_action( 'genesis_header', 'themeprefix_genesis_do_header' );
/*Add Center Widget End*/
?>

CSS

/* Add Header Center Widget Area CSS*/
.site-header .header-middle.widget-area {
  float: left;
  line-height: 146px;
  padding-top: 0;
  text-align: center;
  width: 420px;
}
@media only screen and (max-width: 1180px) {
   .site-header .header-middle.widget-area {
	float:right; line-height:1; width:600px; text-align:center;
	}
}
@media only screen and (max-width: 1023px) {
	.site-header .header-middle.widget-area {
	  float: right;
	  line-height: 1;
	  margin-top: 15px;
	  text-align: center;
	  width: 100%;
	}	
}