How to get NBA headshots based off of player name?

[TimoWij]

Im trying to figure out how to make the rectangles within the boxes smaller, and the lines seperating sections darker! Right now I have the box mainly set up but the rows are just a bit too big, leaving to much space between the text and each text, id rather it be smaller in a rectangle like Below! (The image below that I drew, with the hello in it) Also, I would like the color to fill out the entire row, up the the dividing line rather than leaving space like it does in the screenshot above

Also, is there a way to make a grid like box? So I could put multiple values like in the first box I drew in the screenshot above, in a condensed box form?

[scottyd22]

Below is a shiny app that provides a couple ways to achieve the drawings you shared. In both cases, CSS at the beginning is used to format the rows and cells of the two boxes. Adjust the parameters as needed (update line-height to alter the space between text in the rows).

library(shiny)
library(shinydashboard)

ui <- fluidPage(
  
  HTML('<style>
       .box1 {
       border: 2px solid black;
       width: 250px;
       padding: 5px;
       line-height: 10px;
       display: inline-block; 
       text-align: center;
       }
       
       #my_box2 {
       width: 240px;
       display: grid;
       grid-template-columns: auto auto auto auto;
       gap: 0px;
       padding: 0px;
       }
       
       .grid-item {
       border: 2px solid black;
       min-height: 50px;
       width: 60px;
       text-align: center;
       }
       </style>'),
  
  br(),
  fluidRow(
    box(
      uiOutput('my_box1'),
      width = 3
    ),
    box(
      uiOutput('my_box2'),
      width = 2
    )
  )
)

server <- function(input, output, session) {
  
  # first box content
  output$my_box1 = renderUI({

    # function to create each row
    create_row = function(i) {
      if(i == 2) {bg = 'blue'} else {bg = 'white'}
      
      HTML(
        paste0(
          '<div style = "background-color:', bg , ';" class = "box1">',
          '<font style = "color: black; font-size: 20px;">Text ', i, '</font>',
          '</div>'
        )
      )
    }
    
    # 1-4 rows
    lapply(1:4, create_row)
    
    })
  
  # second box content
  output$my_box2 = renderUI({
    
    # function to create each cell
    create_cell = function(i) {
      if(i %in% c(1,5,7)) {mytext = 'Text'} else {mytext = ' '}
      
      HTML(
        paste0(
          '<div style = "background-color: white;" class = "grid-item">',
          '<font style = "color: black; font-size: 20px;">', mytext, '</font>',
          '</div>'
        )
      )
    }
    
    # 1-16 cells
    lapply(1:16, create_cell)
  
  })
  
}

shinyApp(ui, server)