JSFiddle - React, Tailwind, and code Playground

by acbabis

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
 		<div id="OfficeUI">
 			<div class="title">
 				<span>OfficeWebControls - Demo (Version 0.1)</span>
 			</div>

			<!-- Start of the ribbon. -->
 			<div class="ribbon">
 				<div class="tabs">
 					<ul>
 						<li>
 							<span>File</span>
 						</li>
	 					<li>
	 						<span>Home</span>
	 						<div>
	 							<div>
	 								<div>
		 								<div class="bigicon">
		 									<img src="Resources/Icons/NewMailMessage.png" />
		 									<div>
		 										New<br/>Email
		 									</div>
		 								</div>
										<div class="bigicon">
											<img src="Resources/Icons/MailNewItemMenu.png" />
											<div>
												New<br/>Items
											</div>
											<div class="menu" id="mnuNewItems">
												<div>
													<ul>
														<li>
															<div>
																<img src="Resources/Icons/EmailMessage.png" />
															</div>
															E-Mail Message
														</li>
														<li>
															<div>
																<img src="Resources/Icons/Appointment.png" />
															</div>
															Appointment
														</li>
														<li>
															<div>
																<img src="Resources/Icons/Meeting.png" />
															</div>
															Meeting
														</li>
														<li>
															<div>
																<img src="Resources/Icons/Contact.png" />
															</div>
															Contact
														</li>
														<li>
															<div>
																<img src="Resources/Icons/Task.png" />
															</div>
															Task
														</li>
														<li>
															<div></div>
															E-Mail Message Using
														</li>
														<li>
															<div></div>
															More items
														</li>
														<li>
															<div>
																<img src="Resources/Icons/Lync.png"...

CSS

/* General body styling elements. */
body { background-color: #FFF; font-family: 'Segoe UI' }

/* General classes that can be added on every element to position element. */
.nopadding { padding: 0 }
.nomargin { margin: 0 }
.relative { position: relative; }
.absolute { position: absolute; }
.invisible { display: none; }
.center { text-align: center; }
.left { float: left; }
.inline { display: inline-block; }
.disabled { opacity: .4; filter: alpha(opacity=40) }

/* General styling for the OfficeWebControls elements. */
#OfficeUI { color:#444; font-size: 12px; margin-top: 4px }
#OfficeUI .title { text-align: center; }
.ribbon { margin-top: 4px }
.tabs { border-bottom: 1px solid #d4d4d4; height: 24px }
li[role=tab] { border: 1px solid #FFF; border-bottom: 0; height: 23px; line-height: 23px; padding-left: 12px; padding-right: 13px; }
li[role=tab].active { border: 1px solid #d4d4d4; border-bottom: 1px solid #FFF; color: #0072c6; }
li[role=tab] .title { text-transform: uppercase; }
.contents { display: none; border-bottom: 1px solid #d4d4d4; height: 93px; width: 100%; color: #444; }
.contents.active { display: block; left: 0; }
.group { height: 92px; margin-left: 4px; margin-top: 4px; }
.legend { width: 100%; bottom: 0; }
.icongroup { vertical-align: top; }
.icon { padding-top: 2px; padding-left: 3px; padding-right: 3px; vertical-align: top; }
.bigicon { height: 70px; }
.smallicon { padding-top: 0; height: 24px; padding-right: 5px; }
.icon:hover:not(.disabled), .menucontents > ul li:hover:not(.disabled) { background-color: #cde6f7; }
.icon:active:not(.disabled) { background-color: #92c0e0; }
.label { line-height: 16px; padding-right: 3px; }
.arrow { bottom: 2px;left: 2px; }
.smallicon IMG { vertical-align: middle; }
.smallicon .label { display: inline-block; }
.icon .menu { box-shadow: 0 0 0 #888; display: none; left:4px; margin-top:-1px; }
.smallicon .menu { margin-top: 1px; }
.menucontents { padding: 1px; padding-left:2px; z-index: 100; background-color: white; left:...

JavaScript

// The OfficeUICore namespace. Every function can be called by using "OfficeUICore.{functionName}"
var OfficeUICore = {
	// Disable the margin on the requested element.
	DisableMargin: function(element) {
		$(element).addClass("nomargin");
	},

	// Disable the padding on the requested element.
	DisablePadding: function(element) {
		$(element).addClass("nopadding");
	},

	// Marks an item as being active.
	MakeActive: function(element) {
		$(element).addClass("active");
		$(".contents", element).addClass("active");
	},

	// Marks an item as being inactive.
	MakeInactive: function(element) {
		$(element).removeClass("active");
		$(".contents", element).removeClass("active");
	},

	// Initialize the ribbon.
	Init: function(element) {
		// Disable the margin and the padding of the "UL" class that displays the tabs.
		OfficeUICore.DisableMargin($("#OfficeUI .ribbon .tabs > ul"));
		OfficeUICore.DisablePadding($("#OfficeUI .ribbon .tabs > ul"));

		$(".tabs > ul > li").attr("role", "tab"); // Make the "li" elements in the "tabs" collection act as a "tab".

		// Make the first tab the application tab and disable the margins.
		OfficeUICore.DisableMargin($("li[role=tab]:first-child").addClass("application"));

		$(".tabs > ul li[role=tab] > DIV:first-of-type").addClass("contents"); // Make the first DIV element in each tab act as the "contents".

		// Mark the first tab (not the application tab) as the active one.
		OfficeUICore.MakeActive($("li[role=tab]:not(.application)").first());

		$(".tabs > ul li[role=tab] > SPAN:first-child").addClass("title"); // Make the first element in each tab if it's a SPAN act as a "title".
		$(".contents > DIV").addClass("group"); // For every DIV element in the contents, let them act as a group.
		$(".group > DIV").addClass("icongroup"); // For every DIV element in a group, let them act as an icongroup.
		$(".group > DIV:last-child").addClass("legend"); // Make the last DIV element in a group act as the "legend".
		$(".group >...