JSFiddle - React, Tailwind, and code Playground

HTML

<div fxLayout="row wrap" class="max container">
  <div fxFlex="100%" fxLayoutAlign="center">
    <!--here there is an image-->
  </div>
  <div fxFlex="100%" class="centered-text" fxHide fxShow.gt-lg>
    <h2 [ngClass]="{'gradient' : this.gradient,'lighter':lighter, 'zoom':zoom,  'scale':1.2}" style="margin: 0;" class="font">
      hoverMe
    </h2>
  </div>
</div>

CSS

.container {
  position: relative;
  text-align: center;
  color: black;
}

.zoom {
  transition: transform .2s; /* Animation */
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5);
  color: #00D3FF;
}

TypeScript

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'box',
  templateUrl: './box.component.html',
  styleUrls: ['./box.component.scss']
})

export class BoxAcademyComponent implements OnInit {
  @Input() scale = 1;
  @Input() img = '';
  @Input() title = 'title';
  @Input() descr = '';
  @Input() align = "centerer";
  @Input() lighter = false;
  @Input() zoom = true;
  @Input() gradient: boolean = false;

  constructor() {
  }

  ngOnInit(): void {
  }
}