> ## Documentation Index
> Fetch the complete documentation index at: https://trickest.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Containers Tools

> Explore a collection of powerful and efficient tools in the Containers category to enhance your productivity and security.

export const ToolCard = ({cardTitle, description, iframeUrl, href, category}) => <a href={href} style={{
  textDecoration: 'none'
}}>
    <div style={{
  background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.02) 100%)',
  borderRadius: '16px',
  overflow: 'hidden',
  transition: 'transform 0.4s cubic-bezier(0.215,0.61,0.355,1), box-shadow 0.3s ease',
  height: '35rem',
  display: 'flex',
  marginBottom: '16px',
  flexDirection: 'column',
  border: '1px solid rgba(255, 255, 255, 0.1)',
  boxShadow: '0px 8px 32px -2px rgba(0, 0, 0, 0.25), 0px 1px 2px 0px rgba(255, 255, 255, 0.07)',
  backdropFilter: 'blur(8px)',
  perspective: '1000px'
}} onMouseOver={e => {
  e.currentTarget.style.boxShadow = '0 8px 32px -2px rgba(0, 0, 0, 0.4)';
  e.currentTarget.style.transform = 'translateY(-4px) scale(1.02)';
}} onMouseOut={e => {
  e.currentTarget.style.boxShadow = '0px 8px 32px -2px rgba(0, 0, 0, 0.25), 0px 1px 2px 0px rgba(255, 255, 255, 0.07)';
  e.currentTarget.style.transform = 'translateY(0) scale(1)';
}}>
      <div style={{
  width: '100%',
  height: '300px',
  borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
  position: 'relative'
}}>
        <div style={{
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  background: 'linear-gradient(45deg, rgba(0, 163, 255, 0.1) 0%, rgba(0, 101, 255, 0.05) 100%)'
}} />
        <iframe src={iframeUrl} style={{
  width: '100%',
  height: '100%',
  border: 'none',
  position: 'relative',
  zIndex: 1,
  background: 'transparent'
}} scrolling="no" />
      </div>

      <div style={{
  padding: '1.5rem',
  display: 'flex',
  flexDirection: 'column',
  height: 'calc(100% - 300px)',
  gap: '8px'
}}>
        <h2 style={{
  color: '#ffffff',
  fontSize: '1.4rem',
  margin: 0,
  fontWeight: '600',
  lineHeight: '1.3',
  height: '1.8rem',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  display: '-webkit-box',
  WebkitLineClamp: 1,
  WebkitBoxOrient: 'vertical'
}}>
          {cardTitle}
        </h2>

        <p style={{
  color: 'rgba(163, 179, 188, 0.8)',
  fontSize: '1rem',
  margin: 0,
  lineHeight: '1.5',
  flex: '1 1 auto',
  overflowY: 'auto',
  paddingRight: '8px'
}}>
          {description}
        </p>
      </div>
    </div>
  </a>;

<CardGroup cols={2} />