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

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

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

		console.log("it worked");

		readyAnimation($self, false);

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

		$self.removeClass('detailed');
    }else{
		var offset = {x : $self.offset().left, y : $self.offset().top};

		readyAnimation($self, true);

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

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