JSFiddle - React, Tailwind, and code Playground

HTML

<div class="groups">
	<div class="groupwhite">

			<div class="group">
				<p class="grouptitle"><a href="#">Name of group goes here</a></p>
				<p class="grouptext">Brief description of group goes here.</p>
			</div><div class="group">
				<p class="grouptitle"><a href="#">Name of group goes here</a></p>
				<p class="grouptext">Brief description of group goes here..</p>
			</div><div class="group">
				<p class="grouptitle"><a href="#">Name of group goes here</a></p>
				<p class="grouptext">Brief description of group goes here.</p>
			</div><div class="group">
				<p class="grouptitle"><a href="#">Name of group goes here</a></p>
				<p class="grouptext">Brief description of group goes here.</p>
			</div><div class="group">
				<p class="grouptitle"><a href="#">Name of group goes here</a></p>
				<p class="grouptext">Brief description of group goes here.</p>
			</div><div class="group">
				<p class="grouptitle"><a href="#">Name of group goes here</a></p>
				<p class="grouptext">Brief description of group goes here.</p>
			</div>

	</div>
</div>

CSS

.groupwhite {
  font-family: Helvetica;
  font-size: 110%;
  background-color: white;
  position: relative;
  height: auto;
  width: 88%;
  margin: 65px auto 65px auto;
  text-align: center;
  padding: 26px 26px 24px 26px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -khtml-border-radius: 10px;
  behavior: url(lib/PIE.htc); }
  @media (max-width: 490px) {
    .groupwhite {
      padding: 26px 18px 24px 18px; } }
  @media (max-width: 400px) {
    .groupwhite {
      padding: 26px 10px 24px 10px; } }
  @media (max-width: 390px) {
    .groupwhite {
      width: 89%;
      padding: 26px 6px 24px 6px; } }
  @media (max-width: 385px) {
    .groupwhite {
      width: 92%;
      padding: 26px 4px 24px 4px; } }
  @media (max-width: 375px) {
    .groupwhite {
      width: 93%;
      padding: 26px 2px 24px 2px; } }
  @media (max-width: 370px) {
    .groupwhite {
      width: 94%;
      padding: 26px 0px 24px 0px; } }
  @media (max-width: 365px) {
    .groupwhite {
      width: 96%; } }
  @media (max-width: 355px) {
    .groupwhite {
      width: 100%; } }

p {
  padding: 0px;
  margin: 0px; }

a {
  text-decoration: inherit;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  padding: 0px;
  margin: 0px;
  word-wrap: break-word; }

div {
  margin: 0px;
  padding: 0px; }

.detailed {
  display: none; }

.hide {
  position: absolute !important;
  top: -99999px !important;
  bottom: -999999px !important; }

.group {
  display: inline-block;
  text-align: left;
  width: 300px;
  height: 300px;
  min-height: 300px;
  min-width: 300px;
  padding: 10px;
  margin: 12px;
  background-color: cyan;
  vertical-align: top; }
  @media (max-width: 375px) {
    .group {
      margin-left: 6px;
      margin-right: 6px; } }
  @media (max-width: 365px) {
    .group {
      margin-left: 0px;
      margin-right: 0px; } }
  @media (max-width: 345px) {
    .group {
      width: 285px;
      min-width: 285px;
      height: 315px;
     ...

JavaScript

$('.group:not(.detailed)').mousedown(function(){
		var $self = $(this);
		var speed = 3250;
		var offset = {x : $self.offset().left, y : $self.offset().top};

		readyAnimation();

		$('.group').not($self).addClass('hide');
		$self.animate({'width' : '100%', 'height' : '+=' + '300px'}, {left: 'offset.x' + 'px', top: 'offset.y' + 'px'}, speed);

		function readyAnimation () {
			$self.css({display : 'block'});
			$self.css({'-webkit-box-sizing' : 'border-box', '-moz-box-sizing' : 'border-box', 'box-sizing' : 'border-box'});
			$self.css({margin : '0px'});
		};

		$self.addClass('detailed');
	});


	$('.group.detailed').mousedown(function(){
		var $self = $(this);
		var size = '300px';
		var speed = 3250;

		console.log("it worked");

		resetAnimation();

		$self.animate({'width' : size, 'height' : size}, speed)
		$('.group').removeClass('hide');

		function resetAnimation () {
			$self.css({display : ''}); //Empty quotes resets the CSS value to what it was originally (in the CSS file)
			$self.css({'-webkit-box-sizing' : '', '-moz-box-sizing' : '', 'box-sizing' : ''});
			$self.css({margin : ''});
		};

		$self.removeClass('detailed');
	});